Transition css hover effects on image

Question

I need to do a task where I have an image, this image is being covered in some color fade, and when I hover on image - fade dissapears (the example is https://html5up.net/uploads/demos/forty/ ). I did it, but I also have to do a transition so that disappearing of fade will be slower for 2 seconds. I tried to put transition property everywhere and I failed. Any help, please?

 .photo-text.one { background-size: cover; background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top; height: 409px; position: relative; width: 576px; } .img-overlay { width: 100%; height: 100%; background: #6fc3df; opacity: 0.75; } .photo-text.one:hover:after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top; } .text { position: absolute; top: 100px; left: 150px; color: red; z-index: 1; } 

 <div class="photo-text one"> <div class="img-overlay"></div> <h2 class="text">fffff</h2> </div> 

Answer 1

Instead of this block of code :

.photo-text.one:hover:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}

You can simplify by simply hiding the overlay by modifying its opacity to 0 with the transition of opacity and the duration you need:

.photo-text.one:hover > .img-overlay{
  transition: opacity 1.5s ease-in-out;
  opacity: 0;
}

 .photo-text.one { background-size: cover; background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top; height: 409px; position: relative; width: 576px; } .img-overlay { width: 100%; height: 100%; background: #6fc3df; opacity: 0.75; transition: opacity 1s ease-in-out; } .photo-text.one:hover > .img-overlay{ transition: opacity 1.5s ease-in-out; opacity: 0; } .text { position: absolute; top: 100px; left: 150px; color: red; z-index: 1; } 

 <div class="photo-text one"> <div class="img-overlay"></div> <h2 class="text">fffff</h2> </div> 

Answer 2

You could just hover over the .img-overlay , but since you also want to have the same effect when hovering over the text, leave it as it is and just replace the :after pseudo-element (don't need it) with the > .img-overlay , set its opacity to 0 and apply the transition property as desired:

 .photo-text.one { background-size: cover; background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top; height: 409px; position: relative; width: 576px; max-width: 100%; /* responsiveness */ } .img-overlay { position: absolute; /* needs to be on the child since the relative position is on the parent */ width: 100%; height: 100%; background: #6fc3df; opacity: 0.75; transition: opacity 2s linear; /* optional / when "unhovering" */ } /* added */ .photo-text.one:hover > .img-overlay { opacity: 0; transition: opacity 2s linear; /* can also try other values such as "ease", "ease-out" etc. */ } .text { position: absolute; top: 100px; left: 150px; color: red; z-index: 1; } 

 <div class="photo-text one"> <div class="img-overlay"></div> <h2 class="text">fffff</h2> </div>