CODEWITHSUNDEEP
htmlcss
luis montez
luis montez

Reputation: 35

Hover on a image

I'm doing a page where I'm now messing with some images but the image hover isn't working at all, I'ts behind the main image as it should be but it as parts of it showing to the sides, and if I correct the position of it to be behind the image it is noticable it's there.

How can I hide only to appear when hovering?

Here I send the html and the css.

<div class="social-icons">
        <a class="ImgOnHover" href="https://pt-pt.facebook.com/"><img src="img\facebook.png" alt="Facebook" height="30" width="30"></a>
</div>

underneath is the css:

.social-icons{
 text-align: right;
 padding-right: 15px;
 padding-top: 10px;
 margin-bottom: 25px;
 }

.ImgOnHover{
 display: inline-block;
 width: 50px;
 background: url('img/facebook-hover.png') no-repeat;
}

.ImgOnHover:hover img {
  visibility: hidden;
}

enter image description here

Upvotes: 0

Views: 53

Answers (2)

Kinna T
Kinna T

Reputation: 804

If you add this to your CSS, it matches up:

.ImgOnHover img {
  width: 50px;
  height: auto;
}

Example: https://jsfiddle.net/1r0xa9ox/3/

With your edited question, if you want it to be hidden to begin with and appear when you hover, switch the styling to this:

.ImgOnHover img {
  width: 50px;
  height: auto;
  visibility: hidden;
}
.ImgOnHover:hover img {
  visibility: visible;
}

Upvotes: 1

Nick
Nick

Reputation: 14283

I don't really know what you are trying to achieve, but this is definately not the way I would do it.

Can't you just do something like this instead?

https://codepen.io/anon/pen/JNmoGw

<div class="social-icons">
        <a class="ImgOnHover" href=""></a>
</div>


.social-icons{
 text-align: right;
 padding-right: 15px;
 padding-top: 10px;
 margin-bottom: 25px;
 }

.ImgOnHover{
 display: inline-block;
 width: 50px;
 background: url('https://image.flaticon.com/teams/new/1-freepik.jpg') no-repeat top left;
 background-size:100%;
 content: "";
 height:50px;
}

.ImgOnHover:hover{
 background: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png') no-repeat top left;
 background-size:100%;
}

Upvotes: 1

Related Questions