/    Sign up×
Community /Pin to ProfileBookmark

Hover on images

Hi! I have some images on site, and I want on hover to be next: some color will appear and some text will apear. Something like on this webiste http://corgan.ancorathemes.com/?fbclid=IwAR1sObu6Jhf2rMe4OBRZUPBE-KsLv98cBNpzaKxS-iT2MuJbd_mH7L5TeGc in part “What We Do”. I tried a lot of things, but nothing worked for me. Anybody have idea how to do it? It’s emergency, so any help is a big help for me: Thanks to all.

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@VITSUSAFeb 12.2020 — Click on the mentioned hyperlink to know more about hover on images -

https://www.w3schools.com/howto/howto_css_image_overlay.asp

https://www.youtube.com/watch?v=Cfv_9l8F0Lo
Copy linkTweet thisAlerts:
@mavericksmediaFeb 12.2020 — @Hera-Coder#1614554 i can do it for free if you can add my link into your footer "Designer by" , let me know if you're interesting
Copy linkTweet thisAlerts:
@Hera-CoderauthorFeb 12.2020 — Thanks VITSUSA. This YouTube tutorial helped me. Also, thanks on interesting on my problem mavericksmedia. I did something, but now there is one problem. I have 4 images in div, and I succeed to make some color and some text appear on hover. But,what's the problem. I think, You'll see the best on image. You can see, color is a little left and right over the image, and I don't want it. I just want that color be over the image. If image is 300px width, I want color on image be also 300px width, not 320px. I hope You understand me. Thanks in advance.

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-02-12/1581541442-168804-problem.jpeg]

HTML

<div class="images-gallery">

<i> </i><CODE> &lt;div class="container-overlay"&gt;
<i> </i>
<i> </i> &lt;img src="kuhinja-portfolio.jpg" alt="kitchen" class="image"&gt;
<i> </i> &lt;div class="overlay overlayLeft"&gt;
<i> </i> &lt;div class="textt"&gt;See more&lt;/div&gt;
<i> </i> &lt;/div&gt;
<i> </i>
<i> </i> &lt;/div&gt;
<i> </i>
<i> </i> &lt;div class="container-overlay"&gt;
<i> </i>
<i> </i> &lt;img src="kupatilo portfolio.jpg" alt="kitchen" class="image"&gt;
<i> </i> &lt;div class="overlay overlayFade"&gt;
<i> </i> &lt;div class="textt"&gt;&lt;a href="kitchen.html" target="_blank" class="link"&gt;See more&lt;/a&gt;&lt;/div&gt;
<i> </i> &lt;/div&gt;
<i> </i>
<i> </i> &lt;/div&gt;
<i> </i>
<i> </i> &lt;div class="container-overlay"&gt;
<i> </i>
<i> </i> &lt;img src="livingroom portfolio.jpg" alt="kitchen" class="image"&gt;
<i> </i> &lt;div class="overlay overlayFade"&gt;
<i> </i> &lt;div class="textt"&gt;&lt;a href="kitchen.html" target="_blank" class="link"&gt;See more&lt;/a&gt;&lt;/div&gt;
<i> </i> &lt;/div&gt;
<i> </i>
<i> </i> &lt;/div&gt;
<i> </i>
<i> </i> &lt;div class="container-overlay"&gt;
<i> </i>
<i> </i> &lt;img src="bedroom porfolio.jpg" alt="kitchen" class="image"&gt;
<i> </i> &lt;div class="overlay overlayFade"&gt;
<i> </i> &lt;div class="textt"&gt;&lt;a href="kitchen.html" target="_blank" class="link"&gt;See more&lt;/a&gt;&lt;/div&gt;
<i> </i> &lt;/div&gt;
<i> </i>
<i> </i> &lt;/div&gt;
<i> </i>
<i> </i> &lt;/div&gt;


CSS

.images-gallery {<br/>
display: flex;<br/>
flex-wrap: wrap;<br/>
width: 90%;<br/>
margin: 4% auto ;<br/>
}

.images-gallery .container-overlay {<br/>
flex-basis: 25%; <br/>
}

.images-gallery .container-overlay img {<br/>
display: block;<br/>
margin: 0 auto;<br/>
}

.container-overlay {<br/>
position: relative;<br/>
width: 350px;<br/>
height: 240px;<br/>
display: inline-block;<br/>
}

.image {<br/>
display: block;<br/>
}<br/>
.overlay {<br/>
position: absolute;<br/>
transition: all 1s ease;<br/>
opacity: 0;<br/>
background-color: #eee;<br/>
}

.container-overlay:hover .overlay {<br/>
opacity: 1;<br/>
}

.textt {<br/>
color: white;<br/>
font-family: sans-serif;<br/>
position: absolute;<br/>
top: 50%;<br/>
left: 50%;<br/>
transform: translate(-50%,-50%);<br/>
font-size: 20px;<br/>
}

.overlayLeft {<br/>
height: 100%;<br/>
width: 0;<br/>
top: 0;<br/>
left: 0;<br/>
background-color: #00b1ba;<br/>
}

.container-overlay:hover .overlayLeft {<br/>
width: 100%;<br/>
}<br/>
.overlayFade {<br/>
width: 100%;<br/>
height: 100%;<br/>
top: 0;<br/>
left: 0;<br/>
background-color: #f7a145b5;<br/>
}<br/>


I am pretty sure the problem is in this line .images-gallery .container-overlay {

flex-basis: 25%;

}

but I don't have idea how to fix it. I tried on many ways, but it wasn't successfull.

I hope somebody will know how to fix this problem. Thanks once more
×

Success!

Help @Hera-Coder spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...