I seem to be having some issues having problems aligning three images to the centre at once, i have the float: left property but when removing that, the images stack on top of each other on the left side of the page. As you could probably tell from the code I was only worried about circle and column and not column2 and circle2 as I was using the first row to see if I could get the correct result and then apply it to the second row as well.
UPDATE:
ISSUE WAS FIXED.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure {
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 2%;
}
.rowfirst {
flex: 1 1 25%;
margin: 20px 10px;
width: 20.00%;
padding: 6px;
image-orientation: from-image;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
border-radius: 2%;
pointer-events: none;
}
.rowsecond {
flex: 1 1 25%;
margin: 20px 10px;
width: 20.00%;
padding: 6px;
image-orientation: from-image;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
border-radius: 2%;
pointer-events: none;
}
.rowfirst:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.rowsecond:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
/* Clearfix (clear floats) */
.container {
content: "";
clear: both;
image-orientation: from-image;
padding: 60px;
display: flex;
flex-wrap: flex-start;
}
<h1>Portfolio</h1>
</head>
<div class="container">
<div class="rowfirst">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%" filter:="FlipH"></figure>
</div>
<div class="rowfirst">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="rowfirst">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="container">
<div class="rowsecond">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="rowsecond">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="rowsecond">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="rowsecond">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
</div>
</div>
</body>
</html>
Adam.
You can use the code below, as your case is related to images inside a container block:
.circle {
margin: 2%;
image-orientation: from-image;
text-align:center;
}
In case you wish to align images as inline elements, you should use the properties below:
display: block;
margin: 0 auto;
As you commented that the solution above did not work, I suggest that you use it with flex-box approach - With flex-box, you will have images centralized in the middle of the rows (and page). The rows will also be responsive. Try the code below:
<!DOCTYPE html>
<html>
<style>
.item {
flex: 1 1 25%;
margin: 20px 10px;
text-align: center;
}
.container {
padding: 60px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
</style>
<head>
<title>Page Title</title>
</head>
<body>
<div class="container">
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
</div>
</body>
</html>
Cheers
Related
I have a list of images that are inline. When I hover an image it will show a background with some width and height appear.
My problem is that, when I hover first item for example, the last one or last 2 are going under the first one and I don't want that, I want to stay inline, and if there are no spaces for them in the .content, they must disapppear in order to let the .item:hover create his spaces for showing the background with his width/height.
Also, when I hover last 2 images, its glitching..
This is my code (check on fullscreen)
* {
color: yellow;
}
img {
width: 270px;
height: 300px;
}
.content {
width: 100%;
margin-left: 20px;
margin-top: 20px;
display: inline-flex;
flex-wrap: wrap;
}
.item {
display: inline-block;
background-color: transparent;
width: 250px;
height: 350px;
margin-right: 20px;
transition: 1s ease-in-out;
margin: 10px;
}
.item:hover {
background-color: blue;
width: 1000px;
height: 350px;
}
.item:hover .item-description {
width: 300px;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left: 20px;
position: relative;
transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out, height 1s ease-in-out, width 1s ease-in-out;
}
.item:not(:hover) .item-description {
visibility: hidden;
height: 0;
width: 0;
opacity: 0;
transition: unset;
}
<div class="content">
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
</div>
I added flex-wrap: nowrap; on your .content and none of the cards are going to the next line when hovering. Please view the snippet.
* {
color: yellow;
}
img {
width: 270px;
height: 300px;
}
.content {
width: 100%;
margin-left: 20px;
margin-top: 20px;
display: inline-flex;
flex-wrap: nowrap;
}
.item {
display: inline-block;
background-color: transparent;
width: 250px;
height: 350px;
margin-right: 20px;
transition: 1s ease-in-out;
margin: 10px;
}
.item:hover {
background-color: blue;
width: 1000px;
height: 350px;
flex-shrink: 0;
overflow: scroll;
}
.item;hover .item-description {
width: 300px;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left: 20px;
position: relative;
transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out, height 1s ease-in-out, width 1s ease-in-out;
}
.item:not(:hover) .item-description {
visibility: hidden;
height: 0;
width: 0;
opacity: 0;
transition: unset;
}
<div class="content">
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
</div>
EDIT: Added flex-shrink: 0; to item:hover to preserve the 1000px width Also, I added overflow: scroll; on the same class so you can scroll horizontally to see the content that overflows.
* {
color: yellow;
}
img {
width: 270px;
height: 300px;
}
.content {
width: 100%;
margin-left: 20px;
margin-top: 20px;
display:flex;
flex-wrap:nowrap;
overflow:auto
}
.item {
display: inline-block;
background-color: transparent;
width: 250px;
height: 350px;
margin-right: 20px;
transition: 1s ease-in-out;
margin: 10px;
}
.item:hover {
background-color: blue;
width: 1000px;
height: 350px;
}
.item:hover .item-description {
width: 1000px;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left: 20px;
position: relative;
transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out, height 1s ease-in-out, width 1s ease-in-out;
}
.item:not(:hover) .item-description {
visibility: hidden;
height: 0;
width: 0;
opacity: 0;
transition: unset;
}
<div class="content" >
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
</div>
I have been trying to create a simple CSS and HTML only image gallery slider. This is just for practice and it's really bugging me. When I click the arrow and the container slides over, it slides the full page including the navigation and footer to the left, is there any way I can improve this so that only the images slide over? I've tried messing with the overflow etc.
.galleryw {
display: grid;
grid-template-columns: repeat(3, 100%);
scroll-behavior: smooth;
margin-top: 5px;
padding-bottom: 40px
}
.galleryw section {
width: 100%;
position: relative;
display: grid;
transition: transform .2s;
grid-template-columns: repeat(6, auto);
margin: 10px 0;
}
.galleryw section .item {
padding: 0 2px;
transition: 250ms all;
}
.galleryw section .item:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
.galleryw section a {
position: absolute;
color: #000;
text-decoration: none;
font-size: 6em;
width: 40px;
padding: 10px;
text-align: center;
z-index: 1;
}
.galleryw section a:nth-of-type(1) {
top: 0;
bottom: 0;
left: 0;
}
.galleryw section a:nth-of-type(2) {
top: 1;
bottom: 0;
right: 0;
}
<div class="titles"><h2>ANIMALS<span class="red">.</span></h2></div>
<div class="galleryw">
<section id="section1">
‹
<div class="item">
<img src="img/zebs.png" /><br><h3>ZEBRA<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/toitles.png" /><br><h3>TURTLE<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/dolph.png" /> <br><h3>DOLPHIN<span class="red">.</span></h3> </div>
<div class="item">
<img src="img/re.png" /><br><h3>CHAMELEON<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/king.png" /><br><h3>KINGFISHER</h3>
</div>
<div class="item">
<img src="img/arc.png" /><br><h3>SNOWFOX<span class="red">.</span></h3>
</div>
›
</section>
<section id="section2">
‹
<div class="item">
<img src="img/king2.png" /><br><h3>KINGFISHER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/ele2.png" /><br><h3>ELEPHANT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/rac.png" /> <br><h3>RACCOON<span class="red">.</span></h3></div>
<div class="item">
<img src="img/rab.png" /><br><h3>RABBIT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/deer.png" /><br><h3>DEER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/pea.png" /><br><h3>PEACOCK<span class="red">.</span></h3>
</div>
›
</section>
</div>
You can try it here
http://kny.me/practice/gallery.html
Set overflow-x to auto on the gallery.
.galleryw {
display: grid;
grid-template-columns: repeat(3, 100%);
scroll-behavior: smooth;
margin-top: 5px;
padding-bottom: 40px;
overflow-x:auto;
}
.galleryw section {
width: 100%;
position: relative;
display: grid;
transition: transform .2s;
grid-template-columns: repeat(6, auto);
margin: 10px 0;
}
.galleryw section .item {
padding: 0 2px;
transition: 250ms all;
}
.galleryw section .item:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
.galleryw section a {
position: absolute;
color: #000;
text-decoration: none;
font-size: 6em;
width: 40px;
padding: 10px;
text-align: center;
z-index: 1;
}
.galleryw section a:nth-of-type(1) {
top: 0;
bottom: 0;
left: 0;
}
.galleryw section a:nth-of-type(2) {
top: 1;
bottom: 0;
right: 0;
}
<div class="titles"><h2>ANIMALS<span class="red">.</span></h2></div>
<div class="galleryw">
<section id="section1">
‹
<div class="item">
<img src="img/zebs.png" /><br><h3>ZEBRA<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/toitles.png" /><br><h3>TURTLE<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/dolph.png" /> <br><h3>DOLPHIN<span class="red">.</span></h3> </div>
<div class="item">
<img src="img/re.png" /><br><h3>CHAMELEON<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/king.png" /><br><h3>KINGFISHER</h3>
</div>
<div class="item">
<img src="img/arc.png" /><br><h3>SNOWFOX<span class="red">.</span></h3>
</div>
›
</section>
<section id="section2">
‹
<div class="item">
<img src="img/king2.png" /><br><h3>KINGFISHER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/ele2.png" /><br><h3>ELEPHANT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/rac.png" /> <br><h3>RACCOON<span class="red">.</span></h3></div>
<div class="item">
<img src="img/rab.png" /><br><h3>RABBIT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/deer.png" /><br><h3>DEER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/pea.png" /><br><h3>PEACOCK<span class="red">.</span></h3>
</div>
›
</section>
</div>
In order to scroll just the galleryw element and not the whole page you need to add overflow-x: hidden or overflow-x: auto to your galleryw css class.
The vertical jump is due to the implementation of the anchor links which will use the ScrollIntoView js function in order to get the section you want on the screen.
By default, the alignment is to the top-left corner so you need either to re-arrange your html or to use some javascript with some minor html tweaks.
I'm presenting you the second solution since is way faster and doesn't need you to change the whole layout of your page:
function init() {
let galleryw = document.getElementsByClassName("galleryw")[0];
let toSection1 = document.getElementsByClassName("toSection1");
let toSection2 = document.getElementsByClassName("toSection2");
for(const button of toSection1)
button.onclick = () => galleryw.scrollBy(-galleryw.offsetWidth, 0);
for(const button of toSection2)
button.onclick = () => galleryw.scrollBy(galleryw.offsetWidth, 0);
}
.galleryw {
overflow-x: hidden; /* ADDED */
display: grid;
grid-template-columns: repeat(3, 100%);
scroll-behavior: smooth;
margin-top: 5px;
padding-bottom: 40px
}
.galleryw section {
width: 100%;
position: relative;
display: grid;
transition: transform .2s;
grid-template-columns: repeat(6, auto);
margin: 10px 0;
}
.galleryw section .item {
padding: 0 2px;
transition: 250ms all;
}
.galleryw section .item:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
.galleryw section a {
position: absolute;
color: #000;
text-decoration: none;
font-size: 6em;
width: 40px;
padding: 10px;
text-align: center;
z-index: 1;
}
.galleryw section a:nth-of-type(1) {
top: 0;
bottom: 0;
left: 0;
}
.galleryw section a:nth-of-type(2) {
top: 1;
bottom: 0;
right: 0;
}
.toSection1,
.toSection2 {
cursor:pointer;/* ADDED */
}
<body onload = "init()">
<div class="titles"><h2>ANIMALS<span class="red">.</span></h2></div>
<div class="galleryw">
<section id="section1">
<a class="toSection2">‹</a><!-- Changed -->
<div class="item">
<img src="img/zebs.png" /><br><h3>ZEBRA<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/toitles.png" /><br><h3>TURTLE<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/dolph.png" /> <br><h3>DOLPHIN<span class="red">.</span></h3> </div>
<div class="item">
<img src="img/re.png" /><br><h3>CHAMELEON<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/king.png" /><br><h3>KINGFISHER</h3>
</div>
<div class="item">
<img src="img/arc.png" /><br><h3>SNOWFOX<span class="red">.</span></h3>
</div>
<a class="toSection2">›</a><!-- Changed -->
</section>
<section id="section2">
<a class="toSection1">‹</a><!-- Changed -->
<div class="item">
<img src="img/king2.png" /><br><h3>KINGFISHER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/ele2.png" /><br><h3>ELEPHANT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/rac.png" /> <br><h3>RACCOON<span class="red">.</span></h3></div>
<div class="item">
<img src="img/rab.png" /><br><h3>RABBIT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/deer.png" /><br><h3>DEER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/pea.png" /><br><h3>PEACOCK<span class="red">.</span></h3>
</div>
<a class="toSection1">›</a> <!-- Changed -->
</section>
</div>
</body>
I've just added the init function which get called onload and changed the anchors to normal <a> tags with a class = "toSection..." to recognize them.
The init function uses the scrollBy function on the galleryw so that when our "anchors" get clicked they just scroll the container and not the whole page.
I have these images in a simple responsive grid that I am trying to add an overlay for. When I hover on an image, id like to have 3 or 4 lines that give a general description. By default, the images show, and when I hover id like the text to appear ~ how might I do this?
Here is the current code that I have
<div class="container">
<div class="product-item">
<img src="https://images.unsplash.com/photo-1587202372583-49330a15584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
</div>
<div class="product-item">
<img src="https://images.unsplash.com/photo-1555485086-b0d5d518b225?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
</div>
<div class="product-item">
<img src="https://images.unsplash.com/photo-1555404910-2c3475578b36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
</div>
</div>
.home-body .container {
display: flex;
flex-wrap: wrap;
justify-content: center !important;
margin: 5em 0 0 0;
}
.home-body img {
margin: 5px;
transition: all 1s;
}
.home-body img:hover {
transform: scale(1.05);
transition-duration: .3s;
filter: grayscale(20%);
opacity: 90%;
cursor: pointer;
}
.product-item {
background-color: #212121;
margin: 5px;
}
And here is what I think I could do, but dont know how to implement it with html/css
<div class="container ">
<img src="img.jpg" alt=" ">
<div class="overlay-text">
<h3>Random Title</>
<p>Random description</p>
<p>Random description</p>
<p>Random description</p>
</div
</div>
The simplest solution would be to:
Add 4 text tags which are used for the description you mentioned and assign a class to them.
Add display: none; to the class.
Add, for instance, display: block; to :hover of your class.
HTML:
<div class="container ">
<img src="img.jpg" alt=" ">
<div class="overlay-text">
<h3>Random Title</>
<p>Random description</p>
<p>Random description</p>
<p>Random description</p>
</div
</div>
CSS:
.overlay-text {
display: none;
}
.overlay-text:hover {
display: block;
}
Additionally:
If you want your image to be the background of the div, then remove
<img src="img.jpg" alt=" ">
from your HTML and add this to your overlay-text class in CSS:
background-image: url("img.jpg");
Is this what you are looking for.
.home-body .container {
display: flex;
flex-wrap: wrap;
justify-content: center !important;
margin: 5em 0 0 0;
}
.home-body img {
margin: 5px;
transition: all 1s;
}
.home-body img:hover {
transform: scale(1.05);
transition-duration: .3s;
filter: grayscale(20%);
opacity: 90%;
cursor: pointer;
}
.product-item {
background-color: #212121;
margin: 5px;
position: relative;
}
.home-body a .hover-text {
display: none;
}
.home-body a:hover .hover-text {
display: block;
position: absolute;
text-align: center;
color: #fff;
left: 10%;
top: 50%;
}
<body class="home-body">
<div class="container">
<div class="product-item">
<a href="products.html"><img src="https://images.unsplash.com/photo-1587202372583-49330a15584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
<div class="hover-text">
<h3>Gaming PC</h3>
<p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
</div>
</a>
</div>
<div class="product-item">
<a href="products.html"><img src="https://images.unsplash.com/photo-1555485086-b0d5d518b225?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
<div class="hover-text">
<h3>Gaming PC</h3>
<p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
</div>
</a>
</div>
<div class="product-item">
<a href="products.html"><img src="https://images.unsplash.com/photo-1555404910-2c3475578b36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
<div class="hover-text">
<h3>Gaming PC</h3>
<p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
</div>
</a>
</div>
</div>
</body>
I have created a grid of images with a hover effect. When you hover over the images it zooms in. It is working fine on safari but when I try it out on google chrome the images disappear when you hover over them instead of the zoom effect. I have provided my code below.
HTML :
<body>
<div class="message0">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_134800463.jpg?11249922432265530300" />
Wakeup And Makeup <img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_134800463.jpg?11249922432265530300" />
</div>
<div class="masonry">
<div class="fader0">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_113634307.jpg?3027373344113436523" />
</div>
</div>
<div class="my-wrapper">
<div class="item">
<a href="https://vipera-nyc.myshopify.com/collections/eyeshadow"><img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Vipera_cae46bcd-7bd4-4ed6-ab7d-5970f5d6fa44.jpg?5440451544572147338" /></a>
</div>
</div>
<div class="fader1">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_313764047.jpg?453596164489734443" />
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/HelloG-5.jpg?7272790211589801407" />
</div>
<div class="fader">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/EYEScool.jpg?3027373344113436523" />
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_91130072.jpg?3027373344113436523" />
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Makeup-2.jpg?7468684895134417704" />
</div>
<div class="my-wrapper">
<div class="item">
<a href="https://twitter.com/ViperaNYC"><img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Tweet_us_your_look.jpg?453596164489734443" /></a>
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/glosssssss_5c5c5520-ea20-4c78-8830-e633e5bb1083.jpg?1992342090983963689" />
</div>
<div class="item">
<div class="my-wrapper">
<a
href="https://vipera-nyc.myshopify.com/collections/best-selling-products">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Best_Selling_Products-3.jpg?887070778965157300" />
</a>
</div>
</div>
</div>
</body>
CSS:
.item img { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.itemkat img {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width:100%;
}
.grid {
column-count: 3;
-webkit-column-gap: -10px; /* Chrome, Safari, Opera */
-moz-column-gap: -10px; /* Firefox */
column-gap: -10px;
line-height:100%;
}
.grid-item{
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.message0
{
display:center;
font-size:30px;
}
.my-wrapper {
background-color: #f2f2f2;
}
.my-wrapper:hover img {
opacity:0.2;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
/* margin: 0%; /*makes left margin closer */
overflow: hidden;
width: 470px;
}
.item img {
max-width: 100%; /*reduces space between images */
overflow: hidden;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
overflow: hidden;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.message0 {
font-family: Brush Script MT ;
font-size:120px;
text-align:center;
color:black;
letter-spacing: 5px;
}
I have provided a fiddle. ***IT WORKS ON OTHER INTERNET BROWSERS BUT NOT GOOGLE CHROME WHICH IS THE PROBLEM****
https://jsfiddle.net/getMecoffee56/o11hmwek/1/
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
.imageWrapper {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
padding: 0px;
margin: 0px;
}
.imageWrapper img {
display: block;
width: 200px;
height: 200px;
padding: 0px;
margin: 0px;
}
.imageWrapper .cornerLink {
height:100px;
width:200px;
opacity: 0.7;
position: absolute;
bottom: 0px;
left: 0px;
margin: 0;
padding: 0;
color: #ffffff;
background-color: cadetblue;
text-decoration: none;
text-align: center;
transform: translateX(0) translateY(100px) translateZ(0);
transition-duration:0.3s;
transition-property: transform;
}
.imageWrapper:hover .cornerLink {
transform: translateX(0) translateY(0) translateZ(0);
}
a{
color: #ffffff;
text-decoration: none;
text-align: center;
}
<body>
<main>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
</main>
</body>
Add overflow:hidden; to your .imageWrapper class. Here's working code:
.imageWrapper {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
padding: 0px;
margin: 0px;
overflow:hidden;
}
.imageWrapper img {
display: block;
width: 200px;
height: 200px;
padding: 0px;
margin: 0px;
}
.imageWrapper .cornerLink {
height:100px;
width:200px;
opacity: 0.7;
position: absolute;
bottom: 0px;
left: 0px;
margin: 0;
padding: 0;
color: #ffffff;
background-color: cadetblue;
text-decoration: none;
text-align: center;
transform: translateX(0) translateY(100px) translateZ(0);
transition-duration:0.3s;
transition-property: transform;
}
.imageWrapper:hover .cornerLink {
transform: translateX(0) translateY(0) translateZ(0);
}
a{
color: #ffffff;
text-decoration: none;
text-align: center;
}
<body>
<main>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
</main>
</body>
Change this line transform: translateX(0) translateY(100px) translateZ(0); to transform: translateX(0) translateY(115px) translateZ(0);:
Add overflow:hidden to .imageWrapper to remove the space under images
.imageWrapper {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
padding: 0px;
margin: 0px;
overflow: hidden; /* Hides links when off image */
}
.imageWrapper img {
display: block;
width: 200px;
height: 200px;
padding: 0px;
margin: 0px;
}
.imageWrapper .cornerLink {
height: 100px;
width: 200px;
opacity: 0.7;
position: absolute;
bottom: 0px;
left: 0px;
margin: 0;
padding: 0;
color: #ffffff;
background-color: cadetblue;
text-decoration: none;
text-align: center;
transform: translateX(0) translateY(100px) translateZ(0);
transition-duration: 0.3s;
transition-property: transform;
}
.imageWrapper:hover .cornerLink {
transform: translateX(0) translateY(0) translateZ(0);
}
a {
color: #ffffff;
text-decoration: none;
text-align: center;
}
<body>
<main>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
</main>
</body>