So, I am just discovering the html/css programming world, and my goal is to align images side by side with a link in the middle. Right now, I am trying with a text.
My problem is: I'm using transform: translate(); for the text part, but if I float:left the image the text will stay in the center of the body instead of in the center of the image, and will be stackered.
Or is there a better way to do this?
html
<!DOCTYPE html>
<html>
<head>
<title>Twice</title>
<link rel="stylesheet" type="text/css" href="twices.css">
<link href="https://fonts.googleapis.com/css?family=Lora:700&display=swap" rel="stylesheet">
</head>
<body>
<h1>Twice</h1>
<div>
<div class="container">
<img src="nayeon.jpg" alt="nayeon" name="Nayeon">
<div class="middle">
<div class="text" style="color:#81d4fa">Nayon</div>
</div>
</div>
<div class="container">
<img src="jeongyeon.jpg">
<div class="middle">
<div class="text" style="color:#81d4fa">Jeongyeon</div>
</div>
</div>
</body>
</html>
css
img{
border-radius: 10%;
float: left;
width: 10%;
margin: 0.5%;
}
.container{
position: relative;
text-align: center;
color: white;
}
.middle{
transition: .5s ease;
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -20%);
transform: translate(-590%, -250%);
}
.text{
font-family: Lora;
color: white;
position: absolute;
font-size: 16px;
padding: 16px 32px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
example of what I want
---------------------------------------- update --------------------------------
I actually figured it out what I had to do. Putting it here if someone else needs it. It might seem silly but I was having a hard time with it.
Answer: the float property had to reach the image and the text so I transferred the float:left in the image to de div class that holds both the image and the text. Can't believe it was so simple.
new html
<!DOCTYPE html>
<html>
<head>
<title>Twice</title>
<link rel="stylesheet" type="text/css" href="twices.css">
<link href="https://fonts.googleapis.com/css?family=Lora:700&display=swap" rel="stylesheet">
</head>
<body>
<h1>Twice</h1>
<div>
<div class="container">
<img src="nayeon.jpg" alt="nayeon" name="Nayeon">
<div class="middle">
<div class="link" >Nayon</div>
</div>
</div>
<div class="container">
<img src="jeongyeon.jpg">
<div class="middle">
<div class="link" >Jeongyeon</div>
</div>
</div>
<div class="container">
<img src="momo.jpg">
<div class="middle">
<div class="link" >Momo</div>
</div>
</div>
<div class="container">
<img src="sana.jpg">
<div class="middle">
<div class="link" >Sana</div>
</div>
</div>
<div class="container">
<img src="jihyo.jpg">
<div class="middle">
<div class="link" >Jihyo</div>
</div>
</div>
<div class="container">
<img src="mina.jpg">
<div class="middle">
<div class="link" >Mina</div>
</div>
</div>
<div class="container">
<img src="dahyun.jpg">
<div class="middle">
<div class="link" >Dahyun</div>
</div>
</div>
<div class="container">
<img src="chaeyoung.jpg">
<div class="middle">
<div class="link" >Chaeyoung</div>
</div>
</div>
<div class="container">
<img src="tzuyu.jpg">
<div class="middle">
<div class="link" >Tzuyu</div>
</div>
</div>
</div>
</body>
</html>
NEW CSS
img{
border-radius: 10%;
/*float: left;*/
width: 100%;
}
.container{
margin: 0.5%;
position: relative;
text-align: center;
width: 10%;
color: white;
float: left;/*--------- o float é no conteúdo todo--------------*/
}
.middle{
/*transition: .5s ease;*/
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -20%);
transform: translate(-590%, -250%);
}
.link{
font-family: Lora;
color: white;
position: absolute;
font-size: 16px;
padding: 16px 32px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a{
text-decoration: none;
}
Related
I am relatively new to css/html.
I have been browsing about this issue for a while, but did not find a solution.
The issue is that, if I use the below code (that uses Bulma), the clickable area when hovering on img3.jpg is the entire block starting at the first <div class="columns is-multiline">. I suspect the issue might be some clash between Bulma is-column / is-multiline, and the overlay CSS definition I provided?
<style type="text/css">
ul {
list-style: none;
padding: 10px 10px 10px 30px
}
ul li {
font-size: 120%;
margin-left: 10px;
list-style-type: circle;
}
</style>
<style>
.container {
position: relative;
width: 100%;
}
.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>
<div class="columns is-multiline">
<div class="column is-9">
<div class="content">
<h3> About us </h3>
<hr>
<p align="left" style="font-size:120%;">
some content ...
</p>
</div>
<div class="columns is-multiline">
<div class="column is-4">
<img src="/images/img1.jpg" alt="" class="image"/>
</div>
<div class="column is-4">
<img src="/images/img2.jpg" alt="" class="image"/>
</div>
<div class="column is-4">
<div class="container">
<img src="/images/img3.jpg" alt="" class="image"/>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
</div>
<p align="left" style="font-size:120%;">
some text ...
<ul>
<li>
item 1
<a href="url1">
<b>link</b>
</a>
</li>
<li>
item2
<a href="url2">
<b>link</b></a>
</li>
</ul>
</p>
</div>
<div class="column is-3">
{% include latest-posts.html %}
</div>
</div>
<hr>
try this document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<title>Document</title>
<style>
body {
padding-top: 2em;
}
ul {
list-style: none;
padding: 10px 10px 10px 30px
}
ul li {
font-size: 120%;
margin-left: 10px;
list-style-type: circle;
}
.container {
position: relative;
width: 100%;
}
.columns {
display: flex;
}
.image {
display: block;
width: 100%;
max-width: 320px;
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;
}
.test {
position: absolute;
left: 0;
border-bottom: green solid;
font-size: .5em;
font-weight: bold;
}
.test-top {
top: 0;
}
.test-bottom {
bottom: 0;
}
</style>
</head>
<body>
<div class="columns is-multiline">
<div class="column is-9">
<div class="content">
<h3> About us </h3>
<hr>
<p style="font-size:120%; text-align:left">
some content ...
</p>
</div>
<div class="columns is-multiline">
<p class="test test-top">start columns / is-multiline</p>
<div class="column is-4">
<img src="https://w7.pngwing.com/pngs/715/287/png-transparent-number-1-number-1-creative-cartoon-thumbnail.png" alt="" class="image" />
</div>
<div class="column is-4">
<img src="https://w7.pngwing.com/pngs/664/223/png-transparent-number-2-number-number-2-image-file-formats-text-heart-thumbnail.png" alt="" class="image" />
</div>
<div class="column is-4">
<div class="container">
<img src="https://w7.pngwing.com/pngs/111/727/png-transparent-number-3-illustration-number-blue-crystal-number-three-teal-number-symbol-thumbnail.png" alt="" class="image" />
<div class="overlay">
<p class="test test-top">star overlay</p>
<div class="text">Hello World</div>
<p class="test test-bottom">end overlay</p>
</div>
</div>
</div>
<p class="test test-bottom">end columns / is-multiline</p>
</div>
<p style="font-size:120%; text-align:left">
some text ...
<ul>
<li>
item 1
<a href="url1">
<b>link</b>
</a>
</li>
<li>
item2
<a href="url2">
<b>link</b></a>
</li>
</ul>
</p>
</div>
<div class="column is-3">
{% include latest-posts.html %}
</div>
</div>
<hr>
</body>
</html>
I'm trying to make the paragraph texts appear when I hover over each of the images. The text should be in the center of the image. I'm not entirely sure how I can achieve this.
Another issue I have is that if I set top: 0 and remove the transform, the text isn't actually positioned at top: 0, there is some margin between the top and where the text is.
Codepen below:
https://codepen.io/uhzyrneh/pen/WNvOaWB
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(4, 25%);
background-color: black;
}
.container div {
position: relative;
width: 100%;
overflow: hidden;
}
.container div img {
width: 100%;
transition: 0.4s;
transform: scale(1.1);
opacity: 0.7;
}
.container div img:hover {
transform: scale(1.03);
opacity: 1;
}
.container div p {
color: white;
position: absolute;
top: 0;
left: 50%;
font-size: 50px;
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="">
<img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
<p>Test</p>
</div>
<div class="">
<img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
<p>Test2</p>
</div>
<div class="">
<img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
</div>
</body>
</html>
The rule you're looking for is:
.container div:hover p {
display: inline;
}
And hide the text to begin with by adding display: none; to .container div p.
Also, the text is at the top of the div. If you highlight it, you can see it's right up against the top.
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(4, 25%);
background-color: black;
}
.container div {
position: relative;
width: 100%;
overflow: hidden;
}
.container div img {
width: 100%;
transition: 0.4s;
transform: scale(1.1);
opacity: 0.7;
}
.container div img:hover {
transform: scale(1.03);
opacity: 1;
}
.container div p {
color: white;
position: absolute;
top: 0;
left: 50%;
font-size: 50px;
opacity: 1;
display: none;
}
.container div:hover p {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="">
<img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
<p>Test</p>
</div>
<div class="">
<img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
<p>Test2</p>
</div>
<div class="">
<img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
</div>
</body>
</html>
You could use like this:
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(4, 25%);
background-color: black;
}
.container div {
position: relative;
width: 100%;
overflow: hidden;
}
.container div img {
width: 100%;
transition: 0.4s;
transform: scale(1.1);
opacity: 0.7;
}
.container div img:hover {
transform: scale(1.03);
opacity: 1;
}
.container div p {
color: #fff;
position: absolute;
top: 0;
left: 50%;
font-size: 50px;
opacity: 1;
}
.container div a:hover::after{
content: attr(title);
display:block;
position:absolute;
width:100%;
height:200px;
top:50px;
left:0;
z-index:1;
opacity: 1;
font-size: 50px;
color:#fff;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="">
<img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
</div>
</body>
</html>
I have a grid layout of 4 photos and I need to set them to change when hovered over.
I am able to do this with one image using 'img:hover' and 'position: absolute;' however with multiple images, absolute positioning messes up the layout.
* {
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="column">
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSV7Xfy9xsIHJKQDzyNeuADyO-dTfLioo221t2-7m8ABCWDiaJKTQ" alt="Forest" style="width:100%">
</div>
</div>
<div class="row">
<div class="column">
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSV7Xfy9xsIHJKQDzyNeuADyO-dTfLioo221t2-7m8ABCWDiaJKTQ" alt="Forest" style="width:100%">
</div>
</div>
This is the code that I have so far and I have tried adding background(url...) in the CSS to no avail.
Any help/guidance would be much appreciated, many thanks!
Try with
<div class="row">
<div class="column">
<img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
<img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
</div>
<div class="column">
<img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Forest" style="width:100%">
<img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
</div>
</div>
<div class="row">
<div class="column">
<img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
<img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
</div>
<div class="column">
<img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Forest" style="width:100%">
<img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
</div>
</div>
CSS
*{
box-sizing:border-box;
}
.column {
float: left;
width: 50%;
padding: 5px;
position:relative;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
.hover-img{
display:none;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.column:hover img + img{
display:block;
}
https://jsfiddle.net/lalji1051/jhrpfq8u/4/
You can use Overlay using css. Please check this .. It will work for you
<!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: #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>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">111<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
</div>
</div>
<div class="container">
<img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">222<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
</div>
</div>
<div class="container">
<img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">333<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
</div>
</div>
<div class="container">
<img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">444<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
</div>
</div>
</body>
</html>
The solution was to add the code suggested by Lalji above so that the style was applied to the images accordingly.
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body {
padding: 20px;
font-family: sans-serif;
background: #f2f2f2;
margin: 0;
}
img {
width: 100%;
height: auto;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
}
/* hover styles */
.location-listing {
position: relative;
}
.location-image {
line-height: 0;
overflow: hidden;
}
.location-image img {
filter: blur(0px);
transition: filter 0.3s ease-in;
transform: scale(1.1);
}
.location-title {
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
z-index: 1;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
background: rgba(90, 0, 10, 0.4);
color: white;
/* position the text in t’ middle*/
display: flex;
align-items: center;
justify-content: center;
}
.location-title:hover {
color: #ffffff;
text-decoration: none;
}
.location-listing:hover .location-title {
opacity: 1;
}
.location-listing:hover .location-image img {
filter: blur(2px);
}
/* for touch screen devices */
#media (hover: none) {
.location-title {
opacity: 1;
}
.location-image img {
filter: blur(2px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="child-page-listing">
<div class="grid-container">
<article id="3685" class="location-listing">
<a class="location-title" href="#">San Francisco</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</div>
</article>
<article id="3688" class="location-listing">
<a class="location-title" href="#">London</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
</div>
</article>
<article id="3691" class="location-listing">
<a class="location-title" href="#">New York</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
</div>
</article>
<article id="3694" class="location-listing">
<a class="location-title" href="#">Cape Town</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</div>
</article>
<article id="3697" class="location-listing">
<a class="location-title" href="#">Beijing</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/beijing-768x432.jpg" alt="beijing">
</div>
</article>
<article id="3700" class="location-listing">
<a class="location-title" href="#">Paris</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/paris-768x432.jpg" alt="paris">
</div>
</article>
</div>
<!-- end grid container -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
So i have a container/div in which i have six photos in it. In every photo i want to have an overlay when i hover over it. But the overlay covers the entire div and not just the photo dimensions. Maybe the problem is that i have class?
Wouldn't it be bad to have six css for every separate photo?
Here is the html:
<div id="info-pics">
<div id="info-pics-container">
<div class="info-pic-top">
<img src="service-1.jpg" alt="service-1" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Ύστερα από συνεννόηση με εσάς αναζητούμε τις πιο προσιτές και κατάλληλες δυνατότητες και
ταιριαστά σχέδια ώστε να πετύχουμε ένα όμορφο αποτέλεσμα.
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-2.jpg" alt="service-2" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-3.jpg" alt="service-3" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-4.jpg" alt="service-4" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-5.jpg" alt="service-5" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-6.jpg" alt="service-6" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
</div>
</div>
Here is the CSS:
#info-pics {
position:relative;
height:800px;
}
#info-pics-container {
background-color:grey;
position:absolute;
width:75vw;
height:30vw;
left:13%;
top:15%;
}
/* Container needed to position the overlay. Adjust the width as needed */
.info-pic-top {
float: left;
width: 33.33%;
height:50%;
padding: 5px;
}
/* The overlay effect (full height and width) - lays on top of the container and over the image */
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 100%;
transform: scale(0);
transition: .3s ease;
}
/* When you mouse over the container, the overlay text will "zoom" in display */
.info-pic-top:hover .overlay {
transform: scale(1);
}
/* Some text inside the overlay, which is positioned in the middle vertically and horizontally */
.overlay-text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
Just add position:relative
.info-pic-top {
float: left;
width: 33.33%;
height:50%;
padding: 5px;
position:relative;
}
You missed to add position: relative to the selector info-pic-top. Try this code.
.info-pic-top {
float: left;
width: 33.33%;
height:50%;
padding: 5px;
position: relative;
}
the topic is saying it - my problem is following:
I want to have a color overlay when I hover over my picture
the text on image should be visible before and after hovering without any changes
Issue: when I hover over the text, the color hover overlay disappears (it's just visible when I move around in the Div without moving it over the text)
I tried some other solutions, like pseudo classes, but I didn't make it work...thank ya'll!
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.text_z{
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 999;
}
.image_box_one img {
width: 100%;
display: block;
height: auto;
}
.image_box_one {
background: rgba(29, 106, 154, 0.72);
padding:0px;
margin:0px;
}
.image_box_one img:hover {
opacity: 0.5;
}
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="image_box_one">
<img src="http://placehold.it/1332x1017" />
<div class="text_z">Hover over Me <br>Overlay Disappears</div>
</div>
</div>
<div class="col-lg-4">
<div class="image_box_one">
<img src="http://placehold.it/1332x1017" />
<div class="text_z">Hover over Me <br>Overlay Disappears</div>
</div>
</div>
<div class="col-lg-4">
<div class="image_box_one">
<img src="http://placehold.it/1332x1017" />
<div class="text_z">Hover over Me <br>Overlay Disappears</div>
</div>
</div>
</div>
</div>
When you hover over the text, you're no longer hovering the img. Change your selector to .image_box_one:hover img so that when you hover over anything in an .image_box_one, it will apply styles to the img
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.text_z{
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 999;
}
.image_box_one img {
width: 100%;
display: block;
height: auto;
}
.image_box_one {
background: rgba(29, 106, 154, 0.72);
padding:0px;
margin:0px;
}
.image_box_one:hover img {
opacity: 0.5;
}
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="image_box_one">
<img src="http://placehold.it/1332x1017" />
<div class="text_z">Hover over Me <br>Overlay Disappears</div>
</div>
</div>
<div class="col-lg-4">
<div class="image_box_one">
<img src="http://placehold.it/1332x1017" />
<div class="text_z">Hover over Me <br>Overlay Disappears</div>
</div>
</div>
<div class="col-lg-4">
<div class="image_box_one">
<img src="http://placehold.it/1332x1017" />
<div class="text_z">Hover over Me <br>Overlay Disappears</div>
</div>
</div>
</div>
</div>