I have a photo gallery here: https://www.metaldepotinc.com/gallery.aspx but would like an option for when someone clicks on a thumbnail of a YouTube video it will expand like the pictures do. Is this even possible? Here is the coding:
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 5px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div style="text-align:center">
<h2>Updike Barndominium</h2>
<p>Click on the images below to enlarge:</p>
</div>
<!-- The 5 columns -->
<div class="row">
<div class="column">
<img src="Updike1.jpg" alt="Updike Barndominium" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="Updike2.jpg" alt="Updike Barndominium" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="Updike3.jpg" alt="Updike Barndominium" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="Updike4.jpg" alt="Updike Barndominium" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://www.youtube.com/watch?v=4g3FfxkYvGQ" alt="" style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
</body>
</html>
Related
(I created a post that was taken down because I don't think I gave enough info or something? I added more here, including the html code that I put together. Please let me know if this is not acceptable.)
I am trying to create a horizontal carousel where you can click the images that are linked to other pages. I have tried multiple types of carousels through HTML that I found on w3schools.com and other websites, but none of them were exactly what I was looking for. Here is what I was able to put together but it just isn't what I'm looking for. It doesn't scroll through the images like a carousel. I would also like to make the images links. Any suggestions?
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
</style>
<body>
<div class="container">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Lagoon">
</div>
<div class="column">
<img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Airport">
</div>
<div class="column">
<img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Plants">
</div>
<div class="column">
<img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Jeep">
</div>
<div class="column">
<img class="demo cursor" src="image5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Lagoon Again">
</div>
<div class="column">
<img class="demo cursor" src="image6.jpg" style="width:100%" onclick="currentSlide(6)" alt="Airport Again">
</div>
</div>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
Here is a second one that I tried but it's just not right:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: dodgerblue;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<div class="pagination">
«
<img src="https://example.com/image1.jpg" alt="Throw" style="float: left; width: 25%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image2.jpg" alt="room" style="float: left; width: 22%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image3.jpg" alt=" sectional" style="float: left; width: 25%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image4.jpg" alt="1970" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image5.jpg" alt="home" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://exmple.com/image6.jpeg" alt="home" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
»
</div>
</body>
</html>
Here are two examples of what I would want it to look like:
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>
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
My ultimate goal is to be able to fit my grid in 2 columns perfectly and also so it fits entire screen on my mobile devices. Right now, I still have to scroll down a bit, however that is not what I wanted. I want my screen to be not scrollable but have images/screen fit in perfectly the way I desire. Getting rid of spaces in between 2 columns perhaps. Right now my screen looks bit off and needs a little scrolling. The 2 pictures on the bottom doesn't fit and requires scrolling like shown on the picture.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/swiper.min.css') }}">
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
top: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow-y: auto;
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
body {
margin: 0;
padding: 0;
background-color: white;
font: 10px/13px 'Lucida Sans', sans-serif;
}
.wrap {
overflow: hidden;
margin: 10px;
}
.box {
float: center;
position: relative;
width: 200%;
padding-bottom: 100%;
}
.boxInner {
position: absolute;
left: 50px;
right: -5px;
top: -10px;
bottom: 10px;
overflow: hidden;
}
.fixed {
position: absolute;
left: 30px;
right: 10px;
top: -10px;
bottom: 10px;
overflow: hidden;
}
.boxInner img {
width: 79%;
height: 75%
}
.boxInner img.img2 {
width: 100%;
height: 50%
}
body.no-touch .boxInner:hover .titleBox,
body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 100;
}
#media only screen and (max-width: 480px) {
/* Smartphone view: 1 tile */
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.box {
width: 50%;
padding-bottom: 30%;
}
}
.topnav {
overflow: hidden;
background-color: #66CDAA;
}
.topnav a {
float: center;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #98FB98;
color: white;
}
.topnav .icon {
display: none;
}
.header1 {
margin: auto;
float: center;
padding: 15px;
font-size: 20px;
}
</style>
</head>
<body class="no-touch">
<!-- Swiper -->
<div class="topnav" id="myTopnav">
Let's Get To Know You!
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- Define all of the tiles: -->
<div class="header1">What's your skin color?</div><br><br>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/U8pJVY0.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/Kz06qEO.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/43tH7Td.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/3uZKpV2.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/SF3vYC9.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/8hujzfl.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/cxvELu2.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/zLD3Nv1.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/baYebAV.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/iLd0ukK.png" />
</div>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="../dist/js/swiper.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='swiper.min.js') }}"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
});
</script>
<script type="text/javascript">
$(function() {
// See if this is a touch device
if ('ontouchstart' in window) {
// Set the correct body class
$('body').removeClass('no-touch').addClass('touch');
// Add the touch toggle to show text
$('div.boxInner img').click(function() {
$(this).closest('.boxInner').toggleClass('touchFocus');
});
}
});
</script>
</body>
</html>
It's because your "swiper container" is height:100%, but starts 33px down because of the element above it. You could try calc() css if your browser target range allows it in order to make it 100% height minus the height of the element above. Something like:
height: calc(100% - 33px);
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/