body {
  margin: 0;
  padding: 0;
  background-color: black;
}
html {
  margin: 0;
  padding: 0;
}
div {
  margin: 0;
  padding: 0;
}
body {
  margin-top: 10px;
}
a {
  text-decoration: none;
  color: white;
}
a:hover {
  color: red;
}
li {
  list-style: none;
}
#container {
  max-width: 1004px;
  margin: 0 auto;
  position: relative;
  background-color: black;
}
header {
  width: 100%;
  /*height: 91px;*/
  background-color: black;
  margin-bottom: 3px;
}
#logo {
  height: 84px;
  margin-top: 18px;
  margin-left: 3px;
}
#logo img{
  height: 80px;
  padding-left: 3px;
}
#cName {
  position: absolute;
  left: 44px;
  top: 0px;
}
#contact {
  position: absolute;
  top: 13px;
  right: 5px;
  font-size: 11.5px;
  color: white;
}
#contact ul {
  margin-top: 10px;
  text-align: right;
}
#contact ul li {
  margin-bottom: 0px;
}
nav {

}
nav ul {
  padding-left: 0;
  background-color: #393939;
  height: 15px;
}
nav ul li {
  display: inline-block;
  font-size: 11px;
  font-family: Arial;
  vertical-align: middle;
  margin-right: 0px;
}
ul {
  padding-inline-start: 0px;
  margin-block-start: 0em;
  margin-block-end: 0em;
}
ul li {
  height: 17px;
  margin-bottom: 5px;
}
#home {
  width: 50px;
  margin-left: 5px;
}
#compP {
  width: 103px;
  position: absolute;
  left: 55px;
}
#cult {
  width: 153px;
  position: absolute;
  left: 160px;
}
#evenS {
  width: 143px;
  position: absolute;
  left: 315px;
}
#corpH {
  width: 123px;
  position: absolute;
  left: 465px;
}
#clientA{
  width: 89px;
  position: absolute;
  left: 592px;
}
#empl{
  width: 166px;
  position: absolute;
  left: 695px;
}
#down{
  width: 74px;
  position: absolute;
  left: 860px;
}
#cont{
  width: 61px;
  position: absolute;
  left: 940px;
}
.CPnoLink {
  color: red;
  position: absolute;
  left: 55px;
}
.text {
  position: absolute;
  top: 495px;
  width: 1004px;
  background-color: black;
}
.text p {
  margin-left: 5px;
  margin-right: 5px;
  color: white;
  line-height: 20px;
  text-align: justify;
}
.text h1 {
  color: red;
  background-color: #393939;
  font-family: Arial;
  font-size: 15px;
  padding-left: 1px;
  text-align: center;
  margin-top: 8px;
  margin-left: 6px;
  padding-top: 3px;
  padding-bottom: 4px;
  padding-left: 3px;
  padding-right: 3px;
}
#intro {
  font-family: Times new roman;
  font-size: 16px;
  font-style: italic;
}
#textMain {
  font-family: Times new roman;
  font-size: 15px;
}
footer {
  position: relative;
  top: 775px;
  background-color: black;
}
.disclaimer {
  position: relative;
  margin-top: 9px;
  margin-bottom: 1px;
}
.disclaimerCole {
  position: absolute;
  top: 1112px;
  margin-top: 9px;
  margin-bottom: 1px;
}
.disclaimer ul li {
  display: inline-block;
  width: 310px;
  padding-right: 5px;
  font-family: Arial;
  font-size: 10px;
  margin-bottom: 5px;
  text-align: center;
}
#endNote {
  position: absolute;
  background-color: black;
  top: 20px;
  font-family: Arial;
  color: white;
  width: 993px;
  font-size: 9px;
  text-align: center;
  padding: 3px;
  margin: 3px;
}
#left {
  text-align: left;
  margin-left: 5px;
}
#right {
  text-align: right;
  width: 327px;
  padding-right: 2px;
}
#center {
  margin-left: 27px;
}
/*ANIMATION*/
#wrapper {
  width: 1000px;
  margin: 0 auto;
  position: relative;
  margin-top: 6px;
}
#gallery img {
  position: absolute;
  backface-visibility: hidden;
  background: skyblue;
  height: 350px;
 /* left: 50%;
 /* margin-left: -247px;*/
 /* margin-top: 5%;*/
}
/*#gallery img:nth-child(6) {
  animation: xfade 30s 0s infinite;
}
#gallery img:nth-child(5) {
  animation: xfade 30s 5s infinite;
}
#gallery img:nth-child(4) {
  animation: xfade 30s 10s infinite;
}
#gallery img:nth-child(3) {
  animation: xfade 30s 15s infinite;
}
#gallery img:nth-child(2) {
  animation: xfade 30s 20s infinite;
}
#gallery img:nth-child(1) {
  animation: xfade 30s 25s infinite;
}
/*@keyframes xfade{
  12.66% {
    opacity:1;
  }
  21% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
}
@keyframes xfade {
  0% {
    opacity: 0;
  }
  3.33% {
    opacity: 1;
    animation-timing-function: ease-in;
  }
  6.66% {
    opacity: 1;
  }
  9.99% {
    opacity: 1;
  }
  13.33% {
    opacity: 1;
  }
  16.67% {
    opacity: 1;
  }
  20% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 0;
  }
}*/

#column1 img {
  position: absolute;
  top: 0px;
  right: 905px;
  width: 94px;
  height: 346px;
  border-left: 1px solid red;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
  border-right: 1px solid red;
  animation-name: col1move;
  animation-duration: 2.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
/*@keyframes col1move {
  0% {
    top: 0px;
    right: 192px;
  }
  100% {
    top: 0px;
    right: 905px;
    border-right: 1px solid red;
    border-left: none;
  }
}*/
#column2 img {
  position: absolute;
  top: 0px;
  right: 97px;
  width: 94px;
  height: 346px;
  border-right: 1px solid red;
  border-top: 2px solid red;
  border-left: 1px solid red;
  border-bottom: 2px solid red;
  animation-name: col2move;
  animation-duration: 2.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes col2move {
  0% {
    top: 0px;
    right: 97px;
  }
  99% {
    border-left: 1px solid red;
  }
  100% {
    top: 0px;
    right: 810px;
  }
}
#column3 img {
  position: absolute;
  top: 0px;
  right: 2px;
  width: 94px;
  height: 346px;
  border-left: 1px solid red;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
  border-right: 1px solid red;
  animation-name: col3move;
  animation-duration: 2.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
/*@keyframes col3move {
  0% {
    top: 0px;
    right: 2px;
  }
  99% {
    border-right: 1px solid red;
  }
  100% {
    top: 0px;
    right: 715px;

  }
}*/
#column1 p {
  position: absolute;
  width: 65px;
  top: 280px;
  left: 18px;
  margin-right: 7px;
  color: white;
  font-family: Times New Roman;
  font-size: 12px;
  font-weight: 800;
  z-index: 2;
  animation-name: col1p;
  animation-duration: 2.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
/*@keyframes col1p {
  0% {
    top: 280px;
    left: 728px;
    opacity: 0;
  }
  100% {
    top: 280px;
    left: 18px;
    opacity: 1;
  }
}*/
#column2 p {
  position: absolute;
  width: 65px;
  top: 280px;
  left: 113px;
  margin-right: 7px;
  color: white;
  font-family: Times New Roman;
  font-size: 12px;
  font-weight: 800;
  z-index: 2;
  animation-name: col2p;
  animation-duration: 2.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes col2p {
  0% {
    top: 280px;
    left: 829px;
    opacity: 0;
  }
  100% {
    top: 280px;
    left: 113px;
    opacity: 1;
  }
}
#column3 p {
  position: absolute;
  width: 65px;
  top: 280px;
  left: 920px;
  margin-right: 7px;
  color: white;
  font-family: Times New Roman;
  font-size: 12px;
  font-weight: 800;
  z-index: 2;
  animation-name: col3p;
  animation-duration: 2.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
/*@keyframes col3p {
  0% {
    top: 280px;
    left: 920px;
    opacity: 0;
  }
  100% {
    top: 280px;
    left: 207px;
    opacity: 1;
  }
}*/
#column1 img:hover {
  opacity: .5;
  z-index: 3;
}
#column2 img:hover {
  opacity: .5;
  z-index: 3;
}
#column3 img:hover {
  opacity: .5;
  z-index: 3;
}
/*ANIMATION END*/
.WelHeader {
  position: absolute;
  top: 487px;
  right: 11px;
  width: 653px;
  height: 60px;
  background-color: #393939;
}
.WelHeader p {
  color: white;
  font-family: Arial;
  font-size: 13px;
  font-weight: bold;
  width: 653px;
  height: 60px;
  text-align: center;
  margin-top: 4px;
}
.WelHeader1 p {
  color: white;
  font-family: Arial;
  font-size: 13px;
  font-weight: bold;
  width: 641px;
  height: 60px;
  text-align: justify;
  padding-left: 6px;
  padding-right: 6px;
  margin-top: 4px;
}
.WelHeader1 {
  position: absolute;
  top: 557px;
  right: 11px;
  width: 653px;
  height: 60px;
  background-color: #393939;
}
.title {
  background-color: #393939;
  color: red;
  position: absolute;
  top: 492px;
  width: 165px;
  height: 25px;
  margin-left: 11px;
  text-align: center;

}
.title h1 {
  font-family: Arial;
  font-size: 15px;
  font-weight: normal;
  position: relative;
  top: -7px;
}
.WelText {
  position: absolute;
  width: 653px;
  top: 630px;
  right: 11px;
}
.WelText p {
  color: white;
  font-family: Times;
  text-align: justify;
  margin: 14px 0;
}
#SCText {
  position: absolute;
  height: 200px;
  top: 520px;
  margin-left: 11px;
}
.logoLink h2 {
  color: red;
  font-family: Times;
  font-size: 15px;
  text-align: center;
  width: 250px;
  margin-left: -77px;
  margin-bottom: 20px;
}
.logoLink a:hover {
  border: 1px solid red;
}
#SCText p {
  color: white;
  font-family: Times;
  text-align: justify;
}
.vertImg {
  position: absolute;
  top: 487px;
  left: 11px;
}
.vertImg1 {
  position: absolute;
  top: 918px;
  left: 11px;
}
.logoLink {
  position: absolute;
  top: 650px;
  left: 480px;
  margin: 0 auto;
}
#logoMouse {
  position: absolute;
  top: 735px;
  left: 480px;
}

#logoMouse a:hover {
  outline: 1px solid red;
}

/*
    <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>Change Image on Hover in CSS</title>

    <style type="text/css">

        .card {

            width: 130px;

            height: 195px;

            background: url("images/card-back.jpg") no-repeat;

            display: inline-block;

        }

        .card:hover {

            background: url("images/card-front.jpg") no-repeat;

        }

    </style>

    </head>

    <body>

        <div class="card"></div>

    </body>

    </html>

    Adding a Border to an Image on Hover
    September 1, 2011CSSborder, hoverLisa

    This next issue I want to cover is fairly simple, but I ran into a situation last week where I needed to find a solution to this problem, and I wasn’t sure of the best answer. I wanted to add a border on the hover state of an image. The problem is that when you add a border it adds to the width. The size of the box according to the box model is made up of width+padding+border+margin. So if you only have the border when hovering, the width of the object changes. When you have images in a grid, the problem is very obvious and actually almost nauseating to look at!

    To see the problem, it will be clearest if you go to Demo page to see it in action.
    See Demo

    A simple solution is to add a border on your image, div, etc. (wherever it is you want the border) that is the same color of your background. Obviously, this will only work if you have a solid color background. In my demo, I do, so I will add a white border initially, and change it to black on hover. That way the size never changes, but things look different on hover.

    img {
      border: 3px solid white;
    }
    img:hover {
      border: 3px solid black;
    }

    To solve the problem mentioned above, you can instead use outline property. This will work when you have an image or gradient in your background. It will also work when your initial image has a border, but you want to make it larger on hover. The outline property uses the same syntax as the border shorthand.

    /* Solve problem on a non-solid background
    img:hover {
      outline: 3px solid black;
    }

    /* Solve problem where border size changes on hover
    img {
      border: 1px solid black;
    }
    img:hover {
      outline: 2px solid black;
    }

    See Demo
    Explanation

    The reason this works is that outlines do not add width to your objects. They are not really in the flow of your document, so things don’t change when you hover over something. Outlines are uniform on each side. You cannot set top, right, bottom, left to be different, as you can with borders.

    Notice in the second solution, where the border-size is changing, I made the outline 2px. This is so the final size of border is 3px (1+2).
    Browser Support

    When I first came upon this solution, I read that it did not work in IE. However, I tested in IE8 and it worked fine. It does not work in IE7. So, if hovering in IE7, the border will remain the same. It depends on the importance of the that visual effect to your design if you want to find another solution to work in IE7 or not. Another solution would be to have a 2nd image for the hover state, but that comes at a price because you are downloading more images. In most cases, I’m fine with leaving IE7 hover-borderless, but it would depend on the site and audience of course.
    Post navigation
    ← Text Selection Color
    Transitions →
    10 thoughts on “Adding a Border to an Image on Hover”

        EK
        August 27, 2012 at 1:58 pm

        rounded corners?
        Reply
            bruge
            December 9, 2014 at 1:32 am

            You can do it with : border-radius: 5px 5px 5px 5px; /* 1st value is up left corner, 2nd for up right, 3rd for bot right, and 4th for bot left.
            Reply
        EK
        August 27, 2012 at 2:43 pm

        so I thought of a simple solution for rounded borders, and no jumps:

        -starting with a border before hover (same color as your background color) will avoid the jump or movement when adding a border on hover

        you may have to add 1 px padding as well to make the rounded corners show on hover

        ^I used this for mouse-over images that were also links, and they changed in opacity as well on hover (the border was also affected by the opacity, but it did not concern me for my needs)

        shadows could be used as well