CODEWITHSUNDEEP
javascripthtmlcss
pat
pat

Reputation: 127

Trace div on hover?

Right now I have six floated divs, each with an image as a background. There is a 4.5px margin on each div so it looks like there is a border. I want to make it so that on hover, the div's "border" is traced/filled up in a different color. How do I do that? 

        <div id="one" >
        </div>
        <div id="two" >             
        </div>
        <div id="three" >               
        </div>
        <div id="four" >                
        </div>
        <div id="five" >                
        </div>
        <div id="six" > 
        </div>

Here's the css:

#one,#two,#three,#four,#five,#six{
max-height:400px;
background-color: grey;
margin:4.5px;   
height:60vh;
width:417px;
max-width:417px;
float:left;
background-size: cover;
opacity:.9;
text-align:center;
}

#one{
background-image:url('../images/1.jpg');
}
#two{
background-image:url('../images/2.jpg');
}
#three{
background-image:url('../images/3.jpg');
}
#four{
background-image:url('../images/4.jpg');
}
#five{
background-image:url('../images/5.jpg');
}
#six{
background-image:url('../images/6.jpg');
}

#one:hover,#two:hover,#three:hover,#four:hover,#five:hover,#six:hover{
opacity:1;
box-shadow:  0 0 0 8px white;
}

Upvotes: 1

Views: 427

Answers (3)

Miguel
Miguel

Reputation: 20633

One approach is to use an svg element instead of a div to animate the border (stroke) using stroke-dashoffset and stroke-dasharray.

http://jsfiddle.net/zLuercaa/

Upvotes: 3

connexo
connexo

Reputation: 56753

Simply add transition-duration: 0.4s; or whatever time you want to your divelements.

body {
  background-color: black;
}
#one,
#two,
#three,
#four,
#five,
#six {
  background-image: url('http://lorempixel.com/400/300');
  max-height: 400px;
  background-color: grey;
  margin: 4.5px;
  height: 60vh;
  width: 417px;
  max-width: 417px;
  float: left;
  background-size: cover;
  opacity: .9;
  text-align: center;
  transition-duration: 0.4s;
}
#one:hover,
#two:hover,
#three:hover,
#four:hover,
#five:hover,
#six:hover {
  opacity: 1;
  box-shadow: 0 0 0 8px white;
}
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>

Upvotes: 0

almo
almo

Reputation: 6367

Make

margin:0;

and then add a real border to each div

border: 4px solid blue;

and then on :hover you can change the border color.

Upvotes: 2

Related Questions