CSS transition for a background-image on hover?-CodePudding

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;
}

CodePudding user response：

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>

CodePudding user response：

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;
}