raulbaros raulbaros - 2 months ago 6
CSS Question

Create hover effect on a div or button

I am trying to create a hover-over effect for a div with a font-awesome icon inside. I tried making a

button
out of it also because the div doesnt have a
href
(the "link" actually points to an
overlay
), but here also no luck. So how to create a hover-over effect on a fa icon that has no
href
?



.read-more i {
padding: 5px 10px;
display: inline-block;
-moz-border-radius: 140px;
-webkit-border-radius: 140px;
border-radius: 100px;
-moz-box-shadow: 0 0 2px #888;
-webkit-box-shadow: 0 0 2px #888;
box-shadow: 0 0 2px #888;
background-color: #FFF;
opacity:0.7;
color: #888;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

.read-more:hover {
color:#FFF;
background-color:#000;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" target="_blank">
<div class="well carousel">
<div class="product-detailscar">
<div class="image-video-linkcar">
<img alt="#" src="htpp://lorempixel.com/300/300">

<div class="brandcar">
BRAND
</div>
<div class="categorycar">
CATEGORY
</div>
<div class="read-more">
<i aria-hidden="true" class="fa fa-file-text-o fa-2x"></i>
</div>
</div>
</div>
</div></a>




Answer

The problem is that you are applying the hover styling to the parent element instead of the i:

.read-more i {
    padding: 5px 10px;
    display: inline-block;
    -moz-border-radius: 140px;
    -webkit-border-radius: 140px;
    border-radius: 100px;
    -moz-box-shadow: 0 0 2px #888;
    -webkit-box-shadow: 0 0 2px #888;
    box-shadow: 0 0 2px #888;
    background-color: #FFF;
    opacity:0.7;
    color: #888;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

    .read-more i:hover {
    	color:#FFF;
    	background-color:#000;
    }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="read-more">
  <i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i>
</div>