How to Make Image Hover in CSS

How to make image hover in css?

You've got an a tag containing an img tag. That's your normal state.
You then add a background-image as your hover state, and it's appearing in the background of your a tag - behind the img tag.

You should probably create a CSS sprite and use background positions, but this should get you started:

<div>
    <a href="home.html"></a>
</div>

div a {
    width:  59px;
    height: 59px;
    display: block;
    background-image: url('images/btnhome.png');
}

div a:hover {
    background-image: url('images/btnhomeh.png);
}

This A List Apart Article from 2004 is still relevant, and will give you some background about sprites, and why it's a good idea to use them instead of two different images. It's a lot better written than anything I could explain to you.

Hover effect in the image

What you want is to make a class to control the hover effect you want to add. This is done like so in CSS:

.classname:hover{
    /*css stuff here*/
}

The recommended approach would be to have a different image after the user hovers over your image like so:

.classname:hover{
    background-image: url('path to your image');
}

If you want to add an outline to the image then you can use drop-shadow, which is a quick-fix but I don't recommend, like so:

.classname:hover{
    -webkit-filter: drop-shadow(1px 1px 0 yellow)
                    drop-shadow(-1px -1px 0 yellow);
    filter: drop-shadow(1px 1px 0 yellow) 
            drop-shadow(-1px -1px 0 yellow);
}

Changing image on hover with CSS/HTML

One solution is to use also the first image as a background image like this:

<div id="Library"></div>

#Library {
   background-image: url('LibraryTransparent.png');
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}

If your hover image has a different size, you've got to set them like so:

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
   width: [IMAGE_WIDTH_IN_PIXELS]px;
   height: [IMAGE_HEIGHT_IN_PIXELS]px;
}

HTML/CSS: Allow For Background Image Hover and Absolute Positioned Text

Hi,

Just Edit Selector:

#homepage-solutions .image-box img:hover

To

#homepage-solutions .image-box:hover img

See It working

#homepage-solutions .image-box {
  display: inline-block;
  position: relative;
  overflow: hidden;
  min-width: 250px;
  min-height: 250px;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
  list-style: none;
  vertical-align: middle;
}
#homepage-solutions .image-box img {
  display: block;
  height: 200px;
  width: 100%;
  filter: gray;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
#homepage-solutions .image-box:hover img {
  -webkit-filter: grayscale(0);
  filter: none;
}
#homepage-solutions .text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2em;
  text-align: center;
  max-width: 500px;
}
#homepage-solutions h3 {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
}
#homepage-solutions .text-box p {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  margin: 10px 0;
}
#homepage-solutions .text-box a.btn {
  display: inline-block;
  width: auto;
  color: #fff;
  background: #fd5f11;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  padding: 6px 20px;
  margin: 5px 0 0;
  border-radius: 0;
}
#homepage-solutions .text-box a.btn:hover {
  opacity: 0.75;
}

    <div id="homepage-solutions">
      <div class="image-box">
        <img
          src="https://azbigmedia.com/wp-content/uploads/2019/11/metalworking.jpg"
        />
        <div class="text-box">
          <h3>Metalworking</h3>
          <a href="comingsoon" class="btn">Learn More</a>
        </div>
      </div>
    </div>

Display an image on top of another CSS using hover

i cannot think of another way without position: absolute
but i have created you an example where the the image is positioned automatically on the center using flex box https://jsfiddle.net/r5Lfcbh8/2/

Edit i use position relative on the parent div as relative make the children absolute top left 0 same as relative.

<div class="overlayPar">
    <img src="https://media.marketrealist.com/brand-img/LyxvUFSpl/0x0/nft-black-1617613285599.jpg" alt="" class="equilibrium">
    <div class="imgOverlay">
        <span class="eye"></span>
    </div>
</div>

.overlayPar {
  position: relative;
}

.imgOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 255, 247, .4);
  display: none;
}

.imgOverlay .eye {
  background: white;
  width: 25px;
  height: 25px;
  display: block;
  margin: auto;
}

.overlayPar:hover .imgOverlay  {
  display: flex;
}

.equilibrium {
  display: block;
}

How do I make image hover work on border - CSS

Try putting the :hover to .img-border1 instead of img.

.img-border1 {
  position: relative;
  border: 2px solid;
  width: 20%;
  height: 200px;
}

.img-border1 img {
  position: absolute;
  width: 300px;
  height: 265px;
  filter: grayscale(100%);
  transition: .25s;
  left: 15px;
  top: 15px;
}

.img-border1:hover img {
  filter: none;
  -webkit-filter: none;
}

.img-border1::after {
  border: 4px solid orchid;
  content: "";
  display: block;
  position: absolute;
  top: 30px;
  left: 30px;
  right: -40px;
  bottom: -40px;
}

<div class="img-border1">
  <img src="https://assets.entrepreneur.com/content/3x2/2000/20191219170611-GettyImages-1152794789.jpeg" alt="Sample Image">
</div>

CSS transition for a background-image on hover?

Is this what you want to achieve?

div{
  width: 500px;
  height: 500px;
}
div:before{
  content:'';
  transition: all 0.7s; 
  position: absolute;
  width: 500px;
  height: 500px;
  background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
  background-position: center;
  background-size: cover;
  opacity: 1;
}

div:hover:before{
  opacity: 0;
}

div:hover span{
    opacity: 1;
}

<div>
  <span>1111</span>
</div>

Make image appear on link hover css

The clean way to deal with it is to use :after pseudo element

a:hover:after {
    content: url(image/circle.PNG); /* no need for qoutes */
    display: block;
}

You don't even need the image to be present in the DOM.

Also remember that the path to the image will be relative to the CSS file, not the HTML file.

Of course, the image will push down the content below the anchor. To avoid this you can try:

a:hover {
    position: relative;
}
a:hover:after {
    content: url(image/circle.PNG); /* no need for qoutes */
    display: block;
    position: absolute;
    left: 123px; /* change this value to one that suits you */
    top: 56px; /* change this value to one that suits you */
}

---

Related Topics