CODEWITHSUNDEEP
htmlcssjoomlacss-transitions
majan
majan

Reputation: 139

CSS transition for a background-image on hover?

I am working on webpage where I want to use background image on hover effect, however I have some issue. Image is display on hover with tranisiton but when I move back my mouse then transition is not working and it is not looking good - there is no hover out effect, I hope it is clear. I would like to also use scall effect for hover but I don't have additional wrapar as content is generated by additional module in joomla.

I tried also implement solution with opacity but then I am loosing my border as I don't have additional wrapper.

So far this is my code on website test3.reksio.net

div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
transition: all 0.7s ease-in;
background-position: center;
background-size: cover;
}

Upvotes: 0

Views: 3794

Answers (3)

Riccardo Zorn
Riccardo Zorn

Reputation: 5615

In order to make the transition appear both upon hovering and leaving the element, apply said transition to the element itself; for example, using your css rules in the question it would look like this:

div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1)
{
    transition: all 0.7s ease-in;
}

div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
    background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
    background-position: center;
    background-size: cover;
}

I never tried animating a background image like this. Since the background image is loaded only on hover, the first time there will be a delay (if it's not loaded somewhere else on the page). I would advise you to load the image in the normal style, and "hide" it with background-position or background-size i.e.

div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1)
{
    transition: background-size 0.7s ease-in;
    background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
    background-size: 0 0;
}

div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{        
    background-size: cover;
}

Upvotes: 0

Tsolov
Tsolov

Reputation: 89

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>

Upvotes: 1

Steve Walson
Steve Walson

Reputation: 470

div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
transition: all 0.7s ease-in-out;
background-position: center;
background-size: cover;
}

Upvotes: 0

Related Questions