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>
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 am trying to use overflow, but its not allowing me to scroll but it works as I need that popup on hover, is there any way so I can use overflow visible as well as scroll.
I tried position fixed too, for the span element inside server__list but it doesn't seems to work as well, rest of the elements going underneath, Is there any other property or a better way for doing this?
Here is my code
:root{
--blurple-color: #7289DA;
--lighter-color: #32363a;
--light-color: #2C2F33;
--white-color: #ffffff;
--dark-color: #23272A;
}
#import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');
body, html{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
*{
font-family: 'Balsamiq Sans', cursive;
}
body{
background-color: var(--lighter-color);
}
.server__list{
position: fixed;
top: 0;
bottom: 0;
background-color: var(--dark-color);
width: 50px;
overflow-x: visible;
}
.server__list::-webkit-scrollbar {
display: none;
}
.channel__list{
position: fixed;
left: 50px;
width: 150px;
height: 100%;
background-color: var(--light-color);
}
.user__container{
position: fixed;
bottom: 0;
left: 50px;
width: 150px;
height: 40px;
background-color: #26292c;
}
.user__container .profile{
display: flex;
margin: 10px;
}
.user__container .profile img{
width: 25px;
border-radius: 50%;
}
.user .user__name{
color: var(--white-color);
font-size: 10px;
padding: 0px 5px;
}
.user .user__discrim{
color: grey;
font-size: 8px;
padding: 0px 5px;
}
.profile #logout{
background: none;
outline: none;
border: none;
color: rgb(187, 55, 3);
margin-left: 40px;
transition: color;
transition-duration: 0.5s;
}
.profile #logout:hover{
cursor: pointer;
color: darkred;
}
/* Showing Servers */
.server__list .server{
margin: 10px;
}
.server__list .server img{
width: 32px;
border-radius: 50%;
}
.server:hover{
cursor: pointer;
}
.server span{
display: none;
background-color: #0f1011;
color: white;
border-radius: 4px;
font-size: 12px;
padding: 4px;
text-align: center;
}
.server:hover > span{
display: inline-block;
position: absolute;
margin-top: -40px;
width: 100px;
margin-left: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web</title>
<link rel="icon" href="./static/assets/icon.png" id="header__icon">
<link rel="stylesheet" href="./static/css/style.css">
<script src="https://kit.fontawesome.com/1144a6771a.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="server__list">
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
</div>
<div class="channel__list">
</div>
<div class="user__container">
<div class="profile">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<div class="user">
<div class="user__name">
WiperR
</div>
<div class="user__discrim">
#3131
</div>
</div>
<button id="logout"><i class="fa fa-sign-out" aria-hidden="true"></i></button>
</div>
</div>
<script src="./static/js/index.js"></script>
</body>
</html>
Try this css :
.server__list {
overflow-x: auto;
max-height: 100%;
}
I am not sure if this is what you want, but if you want to allow overflow as well as hide the scrollbar, you can use:-
#my-element::-webkit-scrollbar {display: none;}
and
#my-element {overflow: scroll;}
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 there have 20 different pictures and different sizes. The grid is made with bootstrap. On my example page I only post 3 grid elements. I would like to make an effect, so if a person hover over the image the effect will be something like this, but without the button:
Gradient effect example
I have tried to transfer this effect to my own image, but I cannot make it work. Can anybody see what I am doing wrong here?
Demo can be seen here
This is my demo ode until now:
body {
background-color: #f5f5f5;
}
/* Set width between grid elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
text-align: center;
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
text-align: left
bottom: 8px;
left: 16px;
}
/* Color on text */
.dark-font {
color: #333;
}
.light-font {
color: #fff;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
}
.btn-success {
width: fit-content;
}
}
#media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
.image-overlay {
position:relative;
display:inline-block;
}
.overlay {
position:absolute;
transition:all .3s ease;
opacity:0;
transition:1.9s;
background: #00b1bab8;
}
.image-overlay:hover .overlay {
opacity:1;
}
.overlayFade {
top:0;
background: rgba(27, 27, 27, 0.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEMPLATE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div align="center">
<div>
<div class="image-overlay">
<img src="http://ercsirendelo.hu/_userfiles_/probarendelo/prevencio.jpg" alt="img" >
<div class="overlay overlayFade">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8 margin_bottom">
<div class="image-overlay">
<!-- 770x480-->
<img src="https://d3j0sq6zklqdqq.cloudfront.net/photos/2017/03/06/107-40070-gilmore-girls-1488831826.jpg" alt="5" class="img-responsive" />
<div class="overlay overlayFade"></div>
<div class="inner-wrapper bottom-left">
<h3 class="light-font">Looking for having a good time</h3>
<span class="light-font">Here is where you should look</span>
<!--<button class="btn btn-success btn-lg">Read More</button>-->
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12 margin_bottom">
<!-- 430x235-->
<div class="image-overlay">
<img src="https://www.photolakedistrict.co.uk/wp-content/uploads/Daffodil-Winter-Wedding-Photo-Grasmere.jpg" alt="5" class="img-responsive" />
<div class="overlay overlayFade"></div>
<div class="inner-wrapper bottom-right">
<!--<button class="btn btn-success">Read More</button>-->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 margin_bottom">
<!-- 430x235-->
<div class="image-overlay">
<img src="http://ercsirendelo.hu/_userfiles_/probarendelo/prevencio.jpg" alt="5" class="img-responsive" />
<div class="overlay overlayFade"></div>
<div class="inner-wrapper bottom-right">
<!--<button class="btn btn-success">Read More</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Change the content of the .overlayFade class, adding left, right and bottom properties.
.overlayFade {
background: rgba(27, 27, 27, 0.5);
top: 0;
/* Like this */
bottom: 0;
left: 0;
right: 0;
}
You just need to add following in your css file....
image-overlay:hover .img-responsive {
opacity: 0.5;
}
Just give height or width like
.overlayFade{width: 100%; height: 100%;}
Hope this help
let me know further clearification
I am trying to change the opacity of my images, so that I can use a hover affect later on, to change the opacity back, creating a cool affect. The problem is the opacity attribute doesn't work! I can't seem to figure out the solution. Is it possible that Bootstrap is preventing this somehow?
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
And my CSS: (the opacity attribute is in .affect)
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 50px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 1;
background-color: #070606;
}
You need to have a base state, and a hover state for your image. Change your CSS to:
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s;
}
.affect:hover img {
opacity: 1;
}
This creates the hover effect.
Opacity default value is 1 try making it 0.5.