Transition css hover effects on image - html

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>