Hi I'm following a tutorial. As far as I can see I have written exactly the same thing in my code but it is behaving differently.
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
}
<body>
<div class="container">
<div class="panel active" style="background-image: url('./vincent-guth-uhoILl3HUZM-unsplash.jpg')">
<h3>Beautiful Sky</h3>
</div>
<div class="panel" style="background-image: url('./juskteez-vu-TIrXot28Znc-unsplash.jpg')">
<h3>Incredible sky</h3>
</div>
<div class="panel" style="background-image: url('./casey-horner-fsJB3KT2rj8-unsplash.jpg')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('./vincent-guth-uhoILl3HUZM-unsplash.jpg')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('./vincent-guth-uhoILl3HUZM-unsplash.jpg')">
<h3>Beautiful Sky</h3>
</div>
</div>
</div>
</body>
but on the screen the panel that's active loses all the css from the panel class instead of using both. Any ideas why this might be? Thanks!
Actually it works but the problem is you are using 100% size of your images so its looks like this:
I added border to demonstrate
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
border: red 2px solid;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
}
<body>
<div class="container">
<div class="panel active" style="background-image: url('https://picsum.photos/id/266/200/300')">
<h3>Beautiful Sky</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/230/200/300')">
<h3>Incredible sky</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/217/200/300')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/227/200/300')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/137/200/300')">
<h3>Beautiful Sky</h3>
</div>
</div>
</body>
The solution is using background-size: cover; instead
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
border: red 2px solid;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
}
<body>
<div class="container">
<div class="panel active" style="background-image: url('https://picsum.photos/id/266/200/300')">
<h3>Beautiful Sky</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/230/200/300')">
<h3>Incredible sky</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/217/200/300')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/227/200/300')">
<h3>Northern Lights</h3>
</div>
<div class="panel" style="background-image: url('https://picsum.photos/id/137/200/300')">
<h3>Beautiful Sky</h3>
</div>
</div>
</body>
Try to change value of background-size property to cover (background-size: cover). I think this is what you need
I ran your code in codepen. I only changed the background-images to colors since the were loaded locally. It is behaving as it should, the panel active div displaying everything defined in the panel class aswell. What are you missing?
https://codepen.io/wischn/pen/OJwOQxp
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
}
Related
I am creating a design page in left side there is 2 box and in right it is 3 box.
It's working fine on desktop, now i wanted the box should be show single on mobile devices but unable to figure out.
Following is the my code :
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
/* div partition */
#homecategory { clear: both; padding: 0 10px; max-width: 1230px; margin: 0 auto;}
.category { position: relative; margin-bottom: 20px;}
.left-image { float: left; width: 49%; margin-right: 1%;}
.right-image { float: left; width: 49%; margin-left: 1%;}
/* animation start here */
.cf:before,.cf:after{ display: table; content: " ";}
.cf:after{ clear: both}
.catnamediv { position: absolute; top: 35%; width: 100%; text-align: center; color: #fff; text-transform: uppercase; font-size: 25px; z-index: 99; font-weight: bold; }
.catnamediv a { display: none; width: 180px; margin: 30px auto; background: #297fca; color: #fff; font-size: 20px; padding: 10px 0; text-decoration: none;}
.fancy-card:hover .shopnow{ display: block;}
/*fancy card styling*/
.fancy-card{ background: #eee; width: 100%; display: block; float: left; position: relative; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); transition: all 250ms ease-in; min-height:288px; background-size: cover; background-position: center center; margin-bottom: 30px; }
.fancy-card .bg-overlay{ background: rgba(0,0,0,0.25); position: absolute; top: 0px; left: 0px;
width: 100%; height: 100%; transition: all 200ms linear;}
.category :hover p { border-bottom: 1px solid #fff; display: inline; padding-bottom: 12px;}
/*horizontal border elements (top & bottom)*/
.fancy-card .v-border{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; }
.fancy-card .v-border:before,.fancy-card .v-border:after{ width: 0%; height: 1px; left: 50%; transition: all 250ms ease-out; background: #fff; }
.fancy-card .v-border:before{ content: ''; top: 3%; position: absolute;}
.fancy-card .v-border:after{ content: ''; bottom:3%; position: absolute;}
/*horizontal elements (left & right)*/
.fancy-card .h-border{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%;}
.fancy-card .h-border:before,.fancy-card .h-border:after{ height: 0%; top: 50%; width: 1px;
transition: all 250ms ease-out; background: #fff;}
.fancy-card .h-border:before{ content: ''; left: 3%; height: 0%; position: absolute; }
.fancy-card .h-border:after{ content: ''; right:3%; position: absolute; }
/*hover states for interactivity*/
.fancy-card:active .v-border:before,.fancy-card:active .v-border:after,.fancy-card:hover .v-border:before,
.fancy-card:hover .v-border:after{ width: 94%; left: 3%; }
.fancy-card:active .h-border:before,.fancy-card:active .h-border:after,.fancy-card:hover .h-border:before,
.fancy-card:hover .h-border:after{ height: 94%; top: 3%; }
/*hovering over card, adjust background overlay*/
.fancy-card:active .bg-overlay,.fancy-card:hover .bg-overlay{ background: rgba(0,0,0,0.45); }
/*medium and large profiles*/
#media screen and (min-width: 768px){
.fancy-card{ width: 30%; margin: 0% 1.66% 3.33% 1.66%; }
}
/* title decorate */
.cattilewrap { text-align: center; padding: 20px 0; text-transform: uppercase; position: relative;
background: #fff; z-index: -1;margin-top: 2%;}
.catdnamediv2 { font-size: 30px; font-weight: 500; background: #fff;}
.catdnamediv2 span { display: inline-block; position: relative; }
.catdnamediv2 span:before,.catdnamediv2 span:after { content: ""; position: absolute; height: 5px;
border-bottom: 1px solid #0088cc; border-top: 1px solid #0088cc; top: 0; width: 100%;}
.catdnamediv2 span:before { right: 100%; margin-right: 15px;}
.catdnamediv2 span:after { left: 100%; margin-left: 15px;}
</style>
</head>
<body>
<div id="homecategory" class="home-category ">
<div class="cattilewrap">
<div class="col-12 d-flex justify-content-center catdnamediv1">Shop By</div>
<div class="col-12 d-flex justify-content-center catdnamediv2"><span>Category</span></div>
</div>
<div class="row cf ">
<div class="col-md-6">
<div class=" left-image" >
<div class="category cat01 fancy-card" style=" background-image:url('_2.jpg');width:593px;height:436px;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
<div class="category cat02 fancy-card" style=" background-image:url('_3.jpg');width:593px;height:436px;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class=" right-image" >
<div class="category cat03 fancy-card" style=" background-image:url('_1.jpg');width:593px;height:279px;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
<div class="category cat04 fancy-card" style=" background-image:url('_4.jpg');width:593px;height:279px;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
<div class="category cat05 fancy-card" style=" background-image:url('cat5.jpg');width:593px;height:279px;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have also pasted this code in jsfiddle https://jsfiddle.net/arunendra/w8yhmt70/1/#&togetherjs=Mt5zNmbI7k
This code is written in html and bootsrap4
you can put width:100%;height:100%; in your code instead of width:593px;height:436px; and also add the below code for single box in mobile view.
#media screen and (max-width: 768px){
.left-image { width: 100%; margin-right: 0;}
.right-image { width: 100%; margin-left: 0;}
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
/* div partition */
#homecategory { clear: both; padding: 0 10px; max-width: 1230px; margin: 0 auto;}
.category { position: relative; margin-bottom: 20px;}
.left-image { float: left; width: 49%; margin-right: 1%;}
.right-image { float: left; width: 49%; margin-left: 1%;}
/* animation start here */
.cf:before,.cf:after{ display: table; content: " ";}
.cf:after{ clear: both}
.catnamediv { position: absolute; top: 35%; width: 100%; text-align: center; color: #fff; text-transform: uppercase; font-size: 25px; z-index: 99; font-weight: bold; }
.catnamediv a { display: none; width: 180px; margin: 30px auto; background: #297fca; color: #fff; font-size: 20px; padding: 10px 0; text-decoration: none;}
.fancy-card:hover .shopnow{ display: block;}
/*fancy card styling*/
.fancy-card{ background: #eee; width: 100%; display: block; float: left; position: relative; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); transition: all 250ms ease-in; min-height:288px; background-size: cover; background-position: center center; margin-bottom: 30px; }
.fancy-card .bg-overlay{ background: rgba(0,0,0,0.25); position: absolute; top: 0px; left: 0px;
width: 100%; height: 100%; transition: all 200ms linear;}
.category :hover p { border-bottom: 1px solid #fff; display: inline; padding-bottom: 12px;}
/*horizontal border elements (top & bottom)*/
.fancy-card .v-border{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; }
.fancy-card .v-border:before,.fancy-card .v-border:after{ width: 0%; height: 1px; left: 50%; transition: all 250ms ease-out; background: #fff; }
.fancy-card .v-border:before{ content: ''; top: 3%; position: absolute;}
.fancy-card .v-border:after{ content: ''; bottom:3%; position: absolute;}
/*horizontal elements (left & right)*/
.fancy-card .h-border{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%;}
.fancy-card .h-border:before,.fancy-card .h-border:after{ height: 0%; top: 50%; width: 1px;
transition: all 250ms ease-out; background: #fff;}
.fancy-card .h-border:before{ content: ''; left: 3%; height: 0%; position: absolute; }
.fancy-card .h-border:after{ content: ''; right:3%; position: absolute; }
/*hover states for interactivity*/
.fancy-card:active .v-border:before,.fancy-card:active .v-border:after,.fancy-card:hover .v-border:before,
.fancy-card:hover .v-border:after{ width: 94%; left: 3%; }
.fancy-card:active .h-border:before,.fancy-card:active .h-border:after,.fancy-card:hover .h-border:before,
.fancy-card:hover .h-border:after{ height: 94%; top: 3%; }
/*hovering over card, adjust background overlay*/
.fancy-card:active .bg-overlay,.fancy-card:hover .bg-overlay{ background: rgba(0,0,0,0.45); }
/*medium and large profiles*/
#media screen and (min-width: 768px){
.fancy-card{ width: 30%; margin: 0% 1.66% 3.33% 1.66%; }
}
/* title decorate */
.cattilewrap { text-align: center; padding: 20px 0; text-transform: uppercase; position: relative;
background: #fff; z-index: -1;margin-top: 2%;}
.catdnamediv2 { font-size: 30px; font-weight: 500; background: #fff;}
.catdnamediv2 span { display: inline-block; position: relative; }
.catdnamediv2 span:before,.catdnamediv2 span:after { content: ""; position: absolute; height: 5px;
border-bottom: 1px solid #0088cc; border-top: 1px solid #0088cc; top: 0; width: 100%;}
.catdnamediv2 span:before { right: 100%; margin-right: 15px;}
.catdnamediv2 span:after { left: 100%; margin-left: 15px;}
</style>
</head>
<body>
<div id="homecategory" class="home-category ">
<div class="cattilewrap">
<div class="col-12 d-flex justify-content-center catdnamediv1">Shop By</div>
<div class="col-12 d-flex justify-content-center catdnamediv2"><span>Category</span></div>
</div>
<div class="row cf ">
<div class="col-md-6">
<div class=" left-image" >
<div class="category cat01 fancy-card" style=" background-image:url('_2.jpg');width:100%;height:100%;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
<div class="category cat02 fancy-card" style=" background-image:url('_3.jpg');width:100%;height:100%;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class=" right-image" >
<div class="category cat03 fancy-card" style=" background-image:url('_1.jpg');width:100%;height:100%;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
<div class="category cat04 fancy-card" style=" background-image:url('_4.jpg');width:100%;height:100%;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
<div class="category cat05 fancy-card" style=" background-image:url('cat5.jpg');width:100%;height:100%;">
<div class="bg-overlay"></div>
<div class="v-border"></div>
<div class="h-border"></div>
<div class="catnamediv">
<p>sectional sofa</p>
<a class="shopnow" href="#">shop now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want to align images vertical where the image ratio varies, the image can be bigger or not than the content and also have padding;
I tried solutions that I found here, but I didn't found something that covers everything; I need to work in IE9;10
.thumb {
border: 2px solid #4FA738;
border-radius: 0.1875rem;
cursor: pointer;
display: inline-block;
font: 0/0 a;
margin: 0 0.5rem 0 0;
transition: 0.2s;
text-align: center;
}
.thumb img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
display: block;
vertical-align:middle;
margin:auto;
padding: 2px;
}
<div class="thumbs">
<div class="thumb" style="width:70px;height:70px;">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="thumb" style="width:70px;height:70px;">
<img src="http://via.placeholder.com/200x100">
</div>
<div class="thumb" style="width:70px;height:70px;">
<img src="http://via.placeholder.com/140x100">
</div>
<div class="thumb" style="width:70px;height:70px;">
<img src="http://via.placeholder.com/50x50">
</div>
<div class="thumb" style="width:70px;height:70px;">
<img src="http://via.placeholder.com/150x450">
</div>
</div>
The first pure CSS way to achieve the desired result is to do it with the background-image & co. properties:
.thumb {
border: 2px solid #4FA738;
box-shadow: inset 0 0 0 2px #fff; /* 2px margin/padding trick */
border-radius: 0.1875rem;
cursor: pointer;
display: inline-block;
font: 0/0 a;
margin: 0 0.5rem 0 0;
transition: 0.2s;
text-align: center;
width: 70px;
height: 70px;
}
.thumb {
background-repeat: no-repeat;
background-position: center;
background-size: contain; /* keeps / "contains" the ratio */
}
.thumb:first-child {background-image: url(http://via.placeholder.com/350x150)}
.thumb:nth-child(2) {background-image: url(http://via.placeholder.com/200x100)}
.thumb:nth-child(3) {background-image: url(http://via.placeholder.com/140x100)}
.thumb:nth-child(4) {background-image: url(http://via.placeholder.com/50x50)}
.thumb:last-child {background-image: url(http://via.placeholder.com/150x450)}
<div class="thumbs">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
And the second one where you have to sacrifice the border-radius effect:
.thumb {
border: 2px solid #fff;
outline: 2px solid #4FA738;
border-radius: 0.1875rem;
cursor: pointer;
display: inline-block;
font: 0/0 a;
margin: 0 0.5rem 0 0;
transition: 0.2s;
text-align: center;
position: relative;
}
.thumb img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
display: block;
}
<div class="thumbs">
<div class="thumb" style="width:70px;height:70px;">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="thumb" style="width:70px;height:70px;">
<img src="http://via.placeholder.com/200x100">
</div>
<div class="thumb" style="width:70px;height:70px;">
<img src="http://via.placeholder.com/140x100">
</div>
<div class="thumb" style="width:70px;height:70px;">
<img src="http://via.placeholder.com/50x50">
</div>
<div class="thumb" style="width:70px;height:70px;">
<img src="http://via.placeholder.com/150x450">
</div>
</div>
So I am trying to make a loop of images that has description overlaying each of it. The overlay would be visible when the picture is hovered. Here is an example of the code.
.container {
height: 100px;
width:100px;
display: inline-block;
}
.picture {
height: 100%;
width:100%
}
.contAlign {
text-align: center;
}
.desc {
position:flex;
bottom: 0;
left: 0;
right: 0;
background-color: black;
width: 100%;
height: 0%;
opacity: 0.5;
transition: .5s ease;
}
.container:hover .desc {
height: 40%;
}
<div class="contAlign">
<div class="container">
<img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
<div class="desc"></div>
</div>
</div>
In this case, the description box goes downwards since I wasnt using position: absolute;. However if I do so, the box wont inherit the pictures size and takes the size of the page. How do I solve this?
FIDDLE
Set the position of container to relative so the description would be absolute in relation to it:
.container {
height: 100px;
width:100px;
display: inline-block;
position:relative;
}
.picture {
height: 100%;
width:100%
}
.contAlign {
text-align: center;
}
.desc {
position:absolute;
bottom: 0;
left: 0;
right: 0;
background-color: black;
width: 100%;
height: 0%;
opacity: 0.5;
transition: .5s ease;
}
.container:hover .desc {
height: 40%;
}
<div class="contAlign">
<div class="container">
<img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
<div class="desc"></div>
</div>
</div>
I hope this helps you out. once you make an element absolute, just make sure to make its parent relative. so that it doesn't float anywhere. Now you can set positions accordingly where you want to make it appear on hover.
.container {
height: 100px;
width:100px;
display: inline-block;
position: relative;
}
.picture {
height: 100%;
width:100%
}
.contAlign {
text-align: center;
}
.desc {
position:absolute;
bottom: 0;
left: 0;
right: 0;
background-color: black;
width: 100%;
height: 0%;
opacity: 0.5;
transition: .5s ease;
}
.container:hover .desc {
height: 40%;
}
<div class="contAlign">
<div class="container">
<img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
<div class="desc"></div>
</div>
</div>
I have an image gallery with some hover affects that I want to refine. When the user hovers on an image, the other pictures in the gallery get dimmed out. But I also want some text to slide in from the left on hover as well. Something like this website has http://gugroppo.com/projects.
I have the text appear on hover but I can't get it to transition in from the left smoothly; or have my overlay effect appear smoothly as well. Everything just appears. Here's my codepen.
window.sr = ScrollReveal({reset: true});
sr.reveal('img', {mobile:true});
body {
margin: 0;
padding: 0;
}
h2 {
padding-bottom: 7.5%;
color: #7bbe9a;
text-align: center;
font-size: 1.875em;
font-family: 'Lato', sans-serif;
}
.gallery{
width: 100%;
display: inline-block;
flex-wrap: wrap;
justify-content: center;
padding-top: 7.5%;
padding-bottom: 15%;
background-color: #333;
}
.img-container {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
width: 33.33%;
float: left;
display: block;
position: relative;
}
.img-container img{
display: block;
width: 100%;
height: auto;
}
#slide {
position: absolute;
left: -100px;
transition: 1s;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
/* background: rgba(123, 190, 154, 0.72); */
background: rgba(51,51,51, 0.2);
}
.text {
color: white;
position: absolute;
top: 50%;
left: 50%;
font-size: 24px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
font-family: 'Lato', sans-serif;
}
#parent:hover > .img-container:not(:hover) {
opacity: 0.3;
}
.img-container:hover .overlay {
opacity: 1;
}
#media(max-width:768px){
.img-container {
width: 100% !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<body>
<a class="anchor" name="portfolio">
<div class="gallery">
<h2>Portfolio</h2>
</a>
<div id="parent">
<div class="img-container">
<a href="">
<img src="https://img1.cgtrader.com/items/4716/33d9798412/large/wicker-laundry-basket-3d-model-obj-3ds-c4d.jpg" alt=""></a>
<div class="overlay">
<div class="text">Basket</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="https://cdn.shopify.com/s/files/1/0225/1115/products/buildings-rts-orc-smithy-low-poly-3d-model-2_400x.jpeg?v=1456744435" alt=""></a>
<div class="overlay">
<div class="text">Train</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="http://www.pycomall.com/images/P1/Bed_Room_Interior_3D_Model_in_Max_format_7.jpg" alt=""></a>
<div class="overlay">
<div class="text">Bed</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="http://mycreativedaddy.com/wp-content/uploads/chair-capitone-3d-model.jpg" alt=""></a>
<div class="overlay">
<div class="text">Chair</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="http://www.pycomall.com/images/P1/Restaurant_Interior_3D_Model_in_Max_format_4.jpg" alt=""></a>
<div class="overlay">
<div class="text">Room</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="https://3dexport.com/items/2008/07/29/11820/9454/wedding_ring._3d_model_c4d_max_obj_fbx_ma_lwo_3ds_3dm_stl_66996.jpg" alt=""></a>
<div class="overlay">
<div class="text">Ring</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="http://www.madsonline.net/wp-content/uploads/2017/07/living-room-interior-3d-model-in-max-format-3-3d-models-in-3d-living-room-model.jpg" alt=""></a>
<div class="overlay">
<div class="text">Couch</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="https://d1a9v60rjx2a4v.cloudfront.net/2013/10/03/00_54_27_730_00_1.jpg" alt=""></a>
<div class="overlay">
<div class="text">Glass</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="https://img1.cgtrader.com/items/5185/bb5b9f2fde/large/bailarina-3d-model-obj-3ds-fbx-ma-mb.jpg" alt=""></a>
</div>
</div>
</body>
What you want to do is add overflow: hidden to your container
.img-container{overflow: hidden;}
Then initially start the text off the element. I did this by setting
.text{left: -50%;}
Finally you need to call the text back into the element on hover by using container:hover and setting the text back to 50%;
.img-container:hover .text{left: 50%;}
Lastly you will just need to add in some transition properties and attributes of your likely. Hope this helps.
The follow CSS should accomplish what you are looking for
body {
margin: 0;
padding: 0;
}
h2 {
padding-bottom: 7.5%;
color: #7bbe9a;
text-align: center;
font-size: 1.875em;
font-family: 'Lato', sans-serif;
}
.gallery{
width: 100%;
display: inline-block;
flex-wrap: wrap;
justify-content: center;
padding-top: 7.5%;
padding-bottom: 15%;
background-color: #333;
}
.img-container {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
width: 33.33%;
float: left;
display: block;
position: relative;
overflow: hidden;
}
.img-container img{
display: block;
width: 100%;
height: auto;
}
#slide {
position: absolute;
left: -100px;
transition: 1s;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
/* background: rgba(123, 190, 154, 0.72); */
background: rgba(51,51,51, 0.2);
}
.text {
color: white;
position: absolute;
top: 50%;
left: -50%;
font-size: 24px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
font-family: 'Lato', sans-serif;
}
.img-container:hover .text {
left: 50%;
}
#parent:hover > .img-container:not(:hover) {
opacity: 0.3;
}
.img-container:hover .overlay {
opacity: 1;
}
#media(max-width:768px){
.img-container {
width: 100% !important;
}
}
I need some advice on this issue i'm having. In the jsfiddle below, I'm trying to create a responsive grid layout. The issue with what i have is, i would like the text to be in the middle of each individual grid. I've tried bumping it using margin-top but instead of the images stacking onto each other while resizing, the images are overlapping each other. The end result desired will be to have the text aligned center onto the image and have no gaps on all sides of the grid when resizing according to various screen resolution.
Link: http://jsfiddle.net/kelvinchow/VaDS9/
<style type="text/css">
#wrapper {
display: block;
width: 100%;
height: auto;
background: green;
}
.box {
display: inline-block;
float: left;
width: 50%;
height: auto;
vertical-align: baseline;
background: red;
}
.box-img img {
width: 100% !important;
height: auto;
}
.box-title {
display: block;
background: grey;
height: 25px;
font-size: 20px;
font-family: helvetica, san serif;
color: blue;
text-align: center;
margin-top: -100px;
}
</style>
<div id="wrapper">
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
</div>
You'll get this:
Fiddle here: http://jsbin.com/osazav/1.
With this markup:
<body>
<div id="tl" class="box">
<p class="box-title">howdy</p>
</div>
<div id="tr" class="box">
<p class="box-title">howdy</p>
</div>
<div id="bl" class="box">
<p class="box-title">howdy</p>
</div>
<div id="br" class="box">
<p class="box-title">howdy</p>
</div>
</body>
And this css:
div.box {
background: url('http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png');
position: absolute;
height: 50%;
width: 50%;
background-size: cover;
background-position: center;
}
div.box p.box-title {
color: red;
background-color: black;
padding: 5px;
position: absolute;
margin: -10px -20px;
top: 50%;
left: 50%;
}
div.box#tl { top: 0%; left: 0%; }
div.box#tr { top: 0%; left: 50%; }
div.box#bl { top: 50%; left: 0%; }
div.box#br { top: 50%; left: 50%; }