CODEWITHSUNDEEP
htmlcss
user4752928
user4752928

Reputation:

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>

Upvotes: 1

Views: 2546

Answers (4)

UncaughtTypeError
UncaughtTypeError

Reputation: 8752

I'm not too sure if you need this hover effect applied to the element containing the icon (i.e: a button) or the icon itself. So the code snippet below demonstrates both examples:

  1. Icon Hover
  2. Button + Icon Hover

.stand-alone-complex .fa {
  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: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: .7s;
}
.stand-alone-complex .fa:hover {
  color: #FFF;
  background-color: #000;
}

.read-more {
    position: relative;
    min-height: 50px;
    padding: 10px;
    box-sizing: border-box;
    max-width: 150px;
    display: block;
    margin: auto;
    transition: .7s;
    border: 1px solid #ececec;
}

.read-more .fa {
  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%);
  transition: .7s;
}
.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" />
<strong>Icon Hover</strong>
<div class="stand-alone-complex">
  <i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i>
</div>
<hr>
<strong>Button Hover</strong>
<div class="read-more">
  <i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i>
</div>

Upvotes: 0

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, use below

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

http://codepen.io/nagasai/pen/mAVPBy

Option 2: For this case with single div

div i:hover {
    color:#FFF;
    background-color:#000;
}

http://codepen.io/nagasai/pen/ALEKVg

Option 3 : Use class of i to achieve expected result

.fa-2x:hover {
    color:#FFF;
    background-color:#000;
}

http://codepen.io/nagasai/pen/gwPAZA

Upvotes: 0

APAD1
APAD1

Reputation: 13666

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>

Upvotes: 1

JHacking
JHacking

Reputation: 118

Try .read-more i:hover instead of .read-more:hover

Upvotes: 2

Related Questions