Here is the effect I want:
It's my first time to create a website, so I am using the template from the website and modify the code.
The original code for figure is:
<div class="content">
<div class="media">
<img src="images/home/01.jpg" alt="" title="This right here is a caption." />
</div>
....
</div>
I've tried this, but it did not work:
<div class = "img_div">
<div class="media">
<img src="images/home/01.jpg">
<a href="images/fulls/01.jpg">
<div class="mask">
<h3>A Picture of food</h3>
</div>
</a>
<style>
.img_div {
margin: 20px 400px 0 400px;
position: relative;
width: 531px;
height: 354px;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 531px;
height: 354px;
background: rgba(101, 101, 101, 0.6);
color: #ffffff;
opacity: 0;
}
.mask h3 {
text-align: center;
}
</style>
</div>
</div>
Can anyone help me?
/* Your style.css file */
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background: rgb(0,0,0,0.4);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://i.stack.imgur.com/XZ9UB.jpg" alt="" class="image">
<div class="overlay">
<div class="text">Your Food Description goes here</div>
</div>
</div>
</body>
</html>
This is a nicer solution to your question. Source and adjusted to your image need: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
Since you are a beginner, welcome to the website developer world!
You you may find latest design solutions here https://www.w3schools.com.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background: rgb(0,0,0,0.4);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="images/home/01.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Your Food Description goes here</div>
</div>
</div>
</body>
</html>
<div class = "img_div">
<div class="media">
<a href="#">
<h3>A Picture of food</h3>
<span class="mask"> </span>
<img src="images/home/01.jpg">
</a>
</div>
</div>
<style>
.media {
position: relative;
width: auto;
display: inline-block;
}
span.mask {
position: absolute;
top: 0;
bottom: 0;
background-color: #3a3a3a99;
right: 0;
left: 0;
opacity: 0;
}
.media:hover .mask {
opacity: 1;
}
h3{
position: absolute;
top:10%;
right: 0;
left: 0;
margin: auto;
opacity: 0;
text-align: center;
color: #fff;
}
.media:hover h3{
opacity: 1;
}
</style>
Related
enter image description here
How can I enter a Hover HTML Code over an image in a simple Mailchimp email template?
Do you mean adding a href link when clicking image?
For example,
<img src=".jpg"/>
To hover over an image I have provided a reference code.Refer links for more understanding:https://www.tutorialrepublic.com/faq/how-to-change-image-on-hover-with-css.php
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src="img_avatar.png" alt="My image" class="image">
<div class="overlay">
<div class="text">My Image</div>
</div>
</div>
</body>
</html>
Currently, I copy this code that shows a hidden div on hover
example
but what I want is something like this
goal
What I want is when you hover on title on the 1st box, shown on the 2nd picture, the div containing the title will slide up and occupy the whole space, revealing the other contents below the title.
Can someone recommend me a tutorial similar to this? Thanks in advance :)
/* try this */
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #000000;
overflow: hidden;
width: 100%;
height: 20%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.container .text2{
display:none;
}
.container:hover .text2{
display:block;
padding-top:30px;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World
<div class="text2"> content 1</div>
</div>
</div>
</div>
All you need to do is change the height percentage of the overlay box like so..
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 20%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<!DOCTYPE html>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
I cannot figure out why my overlay class is not producing the opacity overlay on top of the image. When viewing this in with the developer tools open the overlay box looks as if it is only covering the bottom 5% (just over the word "solutions"), however the link works anywhere on the image.
Does anyone see why my overlay isn't covering the entire image?
.machInfo25 {
display: inline-block;
vertical-align: top;
height: 30vh;
position: relative;
box-sizing: border-box;
}
.overlay {
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
border: none;
z-index: 3;
}
.machInfo25 {
width: 25%;
}
.machInfo25 img {
width: 100%;
height: 100%;
object-fit: cover;
}
a .machineInfoTitle {
color: #FFF;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>
Add display: block; or display: inline-block to your overlay class. <a> elements are inline elements which size differently than block elements. The link is still working on the entire image since the image is a child of the link
.machInfo25 {
display: inline-block;
vertical-align: top;
height: 30vh;
position: relative;
box-sizing: border-box;
}
.overlay {
display: block;
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
border: none;
/*z-index: 3;*/
}
.machInfo25 {
width: 25%;
}
.machInfo25 img {
position: relative;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
a .machineInfoTitle {
color: #FFF;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>
Here I have added a sample code, Hope, this will help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,.5);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all" class="image">
<div class="overlay">
<div class="text">Solutions</div>
</div>
</div>
</body>
</html>
The background of .overlay was under the image. I applied the black transparency to the pseudo-code of class .overlay.
.machInfo25 {
height: 30vh;
width: 25%;
}
.overlay {
position: relative;
display: block;
}
.overlay:after {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: rgb(0, 0, 0, 0.3);
width: 100%;
height: 100%;
}
.machInfo25 img {
width: 100%;
}
a .machInfoTitle {
color: white;
}
.total-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>
I'm trying to create a hover overlay on an image. I got the code from; https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I'm having an issue with the text, I am trying to put a small title and one sentence description under it. I can't seem to make it fit, as a new line pushes the above text further up, and leaving it on one paragraph tag makes it over flow.
I am using wordpress, custom-css plugin and a WYSIWYG editor.
.container {
float: left;
position: relative;
width: 25%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #edede7;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: pre;
color: #000000;
font-size: 20px;
position: absolute;
overflow: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img class="image" src="https://www.ultraframehomeimprovements.co.uk/wp-content/uploads/2018/07/Shakletons.png" alt="logo" width="733" height="494" />
<div class="overlay">
<div class="text">
<p><span style="font-size: small;">Inspiring products of indoor and outdoor furniture</span>
</p>
</div>
</div>
</div>
How can I make the text 'fit' into the hover box?
You need to remove the <p> and <span> tags and remove this line:
white-space: pre;
and replace this:
font-size: 20px;
with this:
font-size: small;
That is all you need to fix it, but I have taken the liberty to simplify your code as well.
.container {
float: left;
position: relative;
width: 25%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #edede7;
width: 100%;
height: 0;
transition: .5s ease;
overflow: hidden;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
overflow: visible;
}
.text {
position: absolute;
font-size: small;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img class="image" src="https://via.placeholder.com/500x500" alt="logo"/>
<div class="overlay">
<div class="text">
Inspiring products of indoor and outdoor furniture
</div>
</div>
</div>
you mean this ?
.container {
float: left;
position: relative;
width: 25%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #edede7;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
color: #000000;
position: absolute;
font-size: small;
text-align: justify;
padding: 0 10px;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
<div class="container">
<img class="image" src="http://via.placeholder.com/500x350" alt="logo" width="733" height="494" />
<div class="overlay">
<div class="text">Inspiring products of indoor and outdoor furniture
</div>
</div>
</div>
<div class="container">
<img class="image" src="http://via.placeholder.com/300x150" alt="logo" width="733" height="494" />
<div class="overlay">
<div class="text">Inspiring products of indoor and outdoor furniture
</div>
</div>
</div>
<div class="container">
<img class="image" src="http://via.placeholder.com/600x550" alt="logo" width="733" height="494" />
<div class="overlay">
<div class="text">Inspiring products of indoor and outdoor furniture
</div>
</div>
</div>
Have a look to this:
I have removed white-space: pre; that was impeding the text to wrap on a new line, I also have removed the overflow property you put more or less everywhere, then I changed the image with one without the white canvas and changed some height and width to fit the container.
.container {
float: left;
position: relative;
width: 25%;
overflow: hidden;
}
p {margin:0}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #edede7;
width: 100%;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
color: #000000;
font-size: 20px;
text-align:center;
float: left;
text-align: justify;
padding: 0 10px;
margin-top: 50%;
transform: translateY(-50%);
}
<div class="container">
<img class="image" src="http://via.placeholder.com/400x400" alt="logo" width="100%" />
<div class="overlay">
<div class="text">
<p><span style="font-size: small;">Inspiring products of indoor and outdoor furniture</span>
</p>
</div>
</div>
</div>
I had a gallery of images lines up horizontally but then I made it so that the images have a text overlay when you hover and now nothing that I used to use to get items to line up horizontally works. I'm tried using float left on all the selectors (and likewise with display inline-block) but nothing
<div class = "gallery">
<div>
<div class = "container">
<img src="Images/ConorWhisky.jpg" class = "img"><div class = "overlay">
<div class = "text">Hello</div>
</div>
</div>
</div>
<div>
<div class = "container">
<img src = "Images/Cricket.jpg" class = "img">
<div class = "overlay">
<div class = "text">Hello</div>
</div>
</div>
</div>
And the CSS
<style>
.container{
position:relative;
width: 100%;
}
.gallery{
width: 25%;
padding: 0vw;
margin: 3%;
border-radius: 5vw;
display: inline-block;
margin-left: 5%
}
.img{
width: 100%;
height: 120%;
}
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 95%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: blueviolet;
}
.container:hover .overlay{
opacity: 1;
}
.text{
color: aliceblue;
font-size: 2vw;
font-family: 'poppins',sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
Use flex; you can learn about it here.
.container {
position: relative;
width: 100%;
}
.gallery {
width: 25%;
padding: 0vw;
margin: 3%;
border-radius: 5vw;
display: flex;
flex-direction: row;
margin-left: 5%
}
.img {
width: 100%;
height: 120%;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 95%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: blueviolet;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: aliceblue;
font-size: 2vw;
font-family: 'poppins', sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="gallery">
<div>
<div class="container">
<img src="Images/ConorWhisky.jpg" class="img">
<div class="overlay">
<div class="text">Hello</div>
</div>
</div>
</div>
<div>
<div class="container">
<img src="Images/Cricket.jpg" class="img">
<div class="overlay">
<div class="text">Hello</div>
</div>
</div>
</div>
</div>
Updated your css with following snippet...
.container,
.gallery > div {
position: relative;
display: inline-block;
}
.gallery {
width: 100%;
padding: 0vw;
margin: 3%;
border-radius: 5vw;
float: left;
}
.img {
width: 100%;
height: 120%;
min-width: 200px;
min-height: 200px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 95%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: blueviolet;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: aliceblue;
font-size: 2vw;
font-family: 'poppins', sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="gallery">
<div>
<div class="container"> <img src="Images/ConorWhisky.jpg" class="img">
<div class="overlay">
<div class="text">Hello</div>
</div>
</div>
</div>
<div>
<div class="container"> <img src="Images/Cricket.jpg" class="img">
<div class="overlay">
<div class="text">Hello</div>
</div>
</div>
</div>
</div>
I've changed your HTML and CSS and used flexbox properties to achieve your layout. This avoids using float and inline-block
.gallery {
width: 25%;
margin: 3%;
border-radius: 5vw;
margin-left: 5%;
display: flex;
}
.container {
position: relative;
width: 100%;
}
.img {
width: 100%;
height: auto;
display: flex;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: blueviolet;
display: flex;
justify-content: center;
align-items: center;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: aliceblue;
font-size: 2vw;
font-family: 'poppins', sans-serif;
}
<div class="gallery">
<div class="container">
<img src="https://unsplash.it/200/300" class="img">
<div class="overlay">
<div class="text">Hello</div>
</div>
</div>
<div class="container">
<img src="https://unsplash.it/200/300" class="img">
<div class="overlay">
<div class="text">Hello</div>
</div>
</div>
</div>