CODEWITHSUNDEEP
htmlcsshover
Aaron
Aaron

Reputation: 15

Making a border and arrow change color on hover

I have created an image box when on fade, the border fades to red with a transition. How do I make it fade back to the original colour when you move the mouse off of the div? It currently snaps back and doesn't do it with a transition.

Also, I have created an arrow which I would like placing over the image on the right hand side. This needs to fade in the same way the border does when you hover over the image so that border & triangle both fade together.

I am still fairly new to coding so apologies if this doesn't make sense.

CSS

.image {
position:relative;
width:200px;
height:200px;
border: solid 5px #3b3e40;
}
.image:hover {
border:solid 5px #ff0000;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image img {
width:100%;
vertical-align:top;
}
.arrow-left {
width: 0; 
height: 0; 
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;  
border-right:25px solid #3b3e40; 
}
.arrow-left:hover {
width: 0; 
height: 0; 
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;  
border-right:25px solid #ff0000;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}

HTML

<div class="image">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
<div class="arrow-left"></div>
</div>

<hr>

<div class="image">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
<div class="arrowcontainer">
    <div class="arrow-left"></div>
</div>
</div>

http://jsfiddle.net/4fgnd/1112/

Upvotes: 1

Views: 2202

Answers (2)

ashjones86
ashjones86

Reputation: 128

I would try the arrow-left on the hover, rather than independent.

.image:hover .arrow-left { width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent;
border-right:25px solid #ff0000;}

Upvotes: 0

George
George

Reputation: 36784

Place the transition properties in the block for the element, not the :hover pseudo selector:

.image {
    position:relative;
    width:200px;
    height:200px;
    border: solid 5px #3b3e40;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

Have the arrow change when the image is hovered, not itself:

.image:hover .arrow-left {
    width: 0; 
    height: 0; 
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;  
    border-right:25px solid #ff0000;
}

JSFiddle

Upvotes: 2

Related Questions