I've got a div with images in it. There are going to be a lot of images so I want to be able to scroll left and right within the div with the use of buttons. I previous had the code working but upon changing the divs from media queried and response to static straight CSS, it no longer scrolls.
html:
<div id="maincontent">
<h3 align="center" > Title </h3>
<div id="gallery-display">
<div id="image-1"><img src="image1.jpg" alt="" /></div>
<div id="image-2"><img src="image2.jpg" alt="" /></div>
<div id="image-3"><img src="image3.jpg" alt="" /></div>
<div id="image-4"><img src="image4.jpg" alt="" /></div>
</div>
<div id="gallery-slider-parent">
<div class="left-slider-button">
<input
type="button"
value="◄"
onmousedown="scrollDiv('gallery-slider', 3)"
onmouseup="clearTimeout(timer1)"
/>
</div>
<div id="gallery-slider">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
</div>
<div class="right-slider-button">
<input
type="button"
value="►"
onmousedown="scrosllDiv('gallery-slider', 3)"
onmouseup="clearTimeout(timer1)"
/>
</div>
</div>
</div>
css:
body {
background-color: #000;
}
#maincontent {
width: 960px;
margin: 0 auto;
background-color: #000;
color: #fff;
}
#gallery-display {
height: 500px;
margin: 0 auto;
position: relative;
overflow: hidden;
background-color: #000;
}
#gallery-display img {
display: block;
margin: 0 auto;
height: 500px;
right: 0;
left: 0;
}
#gallery-display [id^='image']:target img {
top: 0;
display: block;
margin: 0 auto;
height: 500px;
}
#gallery-display [id^="image"] img {
position: absolute;
top: -500px;
border: 0;
-moz-transition: top 0.5s ease-in;
-ms-transition: top 0.5s ease-in;
-webkit-transition: top 0.5s ease-in;
-o-transition: top 0.5s ease-in;
}
#gallery-display [id^='image']:target a {
background: #fff;
border: 3px solid #333;
width: 10px;
height: 10px;
}
#gallery-slider-parent {
background-color: #000;
position: relative;
width: 960px;
overflow: hidden;
float: left;
}
#gallery-slider {
background-color: #000;
display: inline;
width: 94%;
float: left;
height: 120px;
overflow: auto;
white-space: nowrap;
}
#gallery-slider img {
height: 75px;
padding: 15px;
float: none;
}
.left-slider-button input[type="button"]{
opacity: .7;
color: #FFF;
float: left;
width: 28px;
border: none;
height: 100px;
background-color: #151515;
}
.right-slider-button input[type="button"]{
opacity: .7;
color: #FFF;
float: left;
width: 28px;
border: none;
height: 100px;
display: inline-block;
background-color: #151515;
}
javascript:
var timer1;
function scrollDiv(divId, depl) {
var scroll_container = document.getElementById(divId);
scroll_container.scrollLeft -= depl;
timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 10);
}
Related
I cant make a button change images
This Is my HTML.
.slider {
&__wrapper {
background-color: #eeeeee;
padding: 0 10%;
margin-top: 2.6%;
}
&__image1 {
width: 100%;
}
&__myslides {
background-color: white;
}
&__image2 {
width: 100%;
display: none;
}
&__image3 {
width: 100%;
display: none;
}
&__buttons {
text-align: center;
background-color: black;
opacity: .5;
}
&__buttons button {
height: 35px;
width: 35px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
cursor: pointer;
margin: 5px;
}
&__buttons button:hover {
opacity: .1;
}
}
<div class="slider">
<div class="container">
<div class="slider__wrapper">
<div class="slider__myslides">
<img src="https://picsum.photos/200/300" alt="robot" class="slider__image1" id="image1" />
</div>
<div class="slider__myslides">
<img src="https://picsum.photos/200/300" alt="space" class="slider__image2" id="image2" />
</div>
<divclass="slider__myslides">
<img src="https://picsum.photos/200/300" alt="space" class="slider__image3" id="image2" />
</div>
<div class="slider__buttons">
<button class="slider__1" id="btn1">1</button>
<button class="slider__2" id="btn2">2</button>
<button class="slider__3" id="btn3">3</button>
</div>
</div>
</div>
</div>
I tried to add class active to transform display none image into Flex. It works.
i can also turn flex into none.
But i can only do it seperatly. I cant make both things happen with just One Burton.
i wanna make a image slider in which png will slide from left to right or right to left depending on the user decision. the design is like a wrapper div . Inside are three divs two for the left and right toggle buttons and one for the img in the middle
Here is the answer
<!DOCTYPE html>
<html>
<head>
<title>Slideshow Images</title>
<style>
.slider {
width: 500px;
height: 300px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-container {
width: 1500px;
background-color: pink;
height: 300px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slide {
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slide-1:target ~ .image-container {
left: 0px;
}
#slide-2:target ~ .image-container {
left: -500px;
}
#slide-3:target ~ .image-container {
left: -1000px;
}
.buttons {
position: relative;
top: -20px;
}
.buttons a {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="slider">
<span id="slide-1"></span>
<span id="slide-2"></span>
<span id="slide-3"></span>
<div class="image-container">
<img src="https://i.ibb.co/j89STLM/drb-flowrt-by-gleb-1.webp" class="slide" width="500" height="300" />
<img src="https://i.ibb.co/kmnTxRQ/Neon-Backgrounds-Pictures-4k-1536x864.jpg" class="slide" width="500" height="300" />
<img src="https://i.ibb.co/Ks5DNqf/Neon-4k-Wallpaper-1536x864.jpg" class="slide" width="500" height="300" />
</div>
<div class="buttons">
</div>
</div>
</body>
</html>
I just did a category filter thing which consist to hide the images that I don't need, so if I click on the car logo at the top I will need to hide every element that doesn't contain "car" id, but the problem is that for some reason it keeps the hidden images dimensions.
for example:
css code:
.block_container{
flex-wrap: wrap;
width: 632px;
height: 350px;
overflow-y: scroll;
background-color: rgba(201, 201, 201, 0.5);
border-radius: 10px;
box-sizing: border-box;
display: block;
}
.game_item{
margin: 13px;
width: 176px;
height: 100px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-sizing: border-box;
float: left;
transition: all 0.4s ease-in-out;
}
.hide{
transform: scale(0);
width: 0;
height: 0;
padding: 0;
transition: all 0.4s ease-in-out;
}
JavaScript code:
$(document).ready(function(){
$('.category_item').click(function(){
var category=$(this).attr('id');
if(category=='all'){
$('.game_item').addClass('hide');
setTimeout(function(){
$('.game_item').removeClass('hide');
}, 300);
} else{
$('.game_item').addClass('hide');
setTimeout(function(){
$('.'+category).removeClass('hide');
}, 300);
}
});
});
I think you just forgot the margin. When you set it to 0 for the class ".hide" it should work as desired.
Working example:
$(document).ready(function(){
$('.category_item').click(function(){
var category=$(this).attr('id');
if(category=='all'){
$('.game_item').addClass('hide');
setTimeout(function(){
$('.game_item').removeClass('hide');
}, 300);
} else{
$('.game_item').addClass('hide');
setTimeout(function(){
$('.'+category).removeClass('hide');
}, 300);
}
});
});
.block_container {
flex-wrap: wrap;
width: 632px;
height: 350px;
overflow-y: scroll;
background-color: rgba(201, 201, 201, 0.5);
border-radius: 10px;
box-sizing: border-box;
display: block;
}
.game_item {
margin: 13px;
width: 176px;
height: 100px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-sizing: border-box;
float: left;
transition: all 0.4s ease-in-out;
}
.hide {
transform: scale(0);
width: 0;
height: 0;
padding: 0;
margin: 0;
transition: all 0.4s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button id="all" class="category_item" type="button">all</button>
<button id="car" class="category_item" type="button">car</button>
<button id="house" class="category_item" type="button">house</button>
<button id="puzzle" class="category_item" type="button">puzzle</button>
</div>
<div class="block_container">
<img src="https://picsum.photos/id/234/200/300" class="game_item puzzle" />
<img src="https://picsum.photos/id/235/200/300" class="game_item puzzle" />
<img src="https://picsum.photos/id/236/200/300" class="game_item house" />
<img src="https://picsum.photos/id/237/200/300" class="game_item car" />
<img src="https://picsum.photos/id/238/200/300" class="game_item car" />
<img src="https://picsum.photos/id/239/200/300" class="game_item house" />
</div>
By the way, i think that manipulating width, height, transform, etc. could be to much and it would be enough to just set opacity: 0; and display: none; (with jQuery hide())
Working example:
$(document).ready(function(){
$('.category_item').click(function(){
var category=$(this).attr('id');
if(category=='all'){
$('.game_item').addClass('hide');
setTimeout(function(){
$('.game_item').show().removeClass('hide');
}, 300);
} else{
$('.game_item').addClass('hide');
setTimeout(function(){
$('.game_item').hide();
$('.'+category).show().removeClass('hide');
}, 300);
}
});
});
.block_container {
flex-wrap: wrap;
width: 632px;
height: 350px;
overflow-y: scroll;
background-color: rgba(201, 201, 201, 0.5);
border-radius: 10px;
box-sizing: border-box;
display: block;
}
.game_item {
margin: 13px;
width: 176px;
height: 100px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-sizing: border-box;
float: left;
transition: opacity 0.4s ease-in-out;
}
.hide {
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button id="all" class="category_item" type="button">all</button>
<button id="car" class="category_item" type="button">car</button>
<button id="house" class="category_item" type="button">house</button>
<button id="puzzle" class="category_item" type="button">puzzle</button>
</div>
<div class="block_container">
<img src="https://picsum.photos/id/234/200/300" class="game_item puzzle" />
<img src="https://picsum.photos/id/235/200/300" class="game_item puzzle" />
<img src="https://picsum.photos/id/236/200/300" class="game_item house" />
<img src="https://picsum.photos/id/237/200/300" class="game_item car" />
<img src="https://picsum.photos/id/238/200/300" class="game_item car" />
<img src="https://picsum.photos/id/239/200/300" class="game_item house" />
</div>
I'm working on a slideShow and I'm trying to make .slidesTextes have a translation from the bottom and an opacity change, all controlled by a button that call a JS function.
However, it only works once : when the page is fully loaded. I tried to find out why, but I'm stuck. All I can say is that when I use the console and type my JS code ligne by ligne, it works perfectly. But if I type the full JS code at once in the console, it doesn't work anymore...
Please find the code below :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta title="">
<link rel="stylesheet" href="styleSheet.css">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
</head>
<body>
<div class="slides">
<div class="slidesImages">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
</div>
<div class="slidesTextes">
<span class="slidesTitre"><h2>First title</h2></span>
<span class="slidesTitre"><h2>Second title</h2></span>
<span class="slidesTitre"><h2>Third title</h2></span>
<span class="slidesTitre"><h2>Forth title</h2></span>
</div>
<div class="slidesBoutons">
<span id="slidesNumeros">1/4</span>
<a class="fleche" onclick="changeSlide(-1);"><</a>
<a class="fleche" onclick="changeSlide(1);">></a>
<a class="appelAction" href="https://tout-pres-de-chez-moi.fr/pages/demander-une-livraison-a-domicile">Button/link →</a>
</div>
</div>
</body>
</html>
Here is the script I use:
<script>
var numeroSlide=1;
afficherSlide(numeroSlide);
function changeSlide(numero){
numeroSlide=numeroSlide+numero;
if(numeroSlide<1){numeroSlide=4;}
if(numeroSlide>4){numeroSlide=1;}
afficherSlide(numeroSlide);
}
function afficherSlide(numeroSlide){
listImages=document.getElementsByClassName("image");
listTitres=document.getElementsByClassName("slidesTitre");
for(i=0;i<listImages.length;i++){
listImages[i].style.display="none";
listTitres[i].style.display="none";
}
listImages[numeroSlide-1].style.display="";
listTitres[numeroSlide-1].style.display="";
document.getElementById("slidesNumeros").innerHTML=numeroSlide+"/"+listImages.length;
apparaitre();
}
function apparaitre(){
document.getElementsByClassName("slidesTextes")[0].style.display="none";
document.getElementsByClassName("slidesTextes")[0].style.display="";
}
</script>
And here is the CSS file:
margin: 0px;
padding: 0px;
}
.slides{
height: 100vh;
position: absolute;
}
.slidesImages{
width: 100vw;
max-width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slidesImages img{
width: 102%;
min-width: 1000px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: slideChange;
animation-duration: 1s;
}
#keyframes slideChange{
from{opacity: 0;}
to{opacity: 1;}
}
.slidesTextes{
font-family: serif;
font-size: 7vh;
font-weight: bold;
color: white;
position: absolute;
bottom: 25vh;
left: 8%;
animation: apparition 1s;
border: 1px solid red;
}
#keyframes apparition{
from{opacity: 0;bottom: 0vh;}
to{opacity:1;bottom: 25vh;}
}
.slidesTextes h2{
display: inline;
background-color: #f4743c;
padding: 0 1vw;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.slidesBoutons{
position: absolute;
bottom: 15%;
left: 8%;
width: 90%;
margin: 0.5vh 0;
}
.slidesBoutons *{
background-color: #29893f;
color: white;
font-family: sans-serif;
font-weight: bold;
font-size: 2.5vh;
float: left;
box-sizing: border-box;
height: 7vh;
line-height: 7vh;
padding: 0 1.5vw;
margin: 0 0.1vw;
text-decoration: none;
}
.slidesBoutons span{
opacity: 0.8;
}
.slidesBoutons a:hover{
background-color: #39994f;
cursor: pointer;
transition: 0.3s ease;
}
The browser is acting correctly; the animation is only triggered when the node renders, and it renders once. You have to remove the animation and re-add it whenever an arrow button gets clicked. The easiest way is to make it its own class (run code snippet):
var numeroSlide = 1;
afficherSlide(numeroSlide);
function changeSlide(numero) {
animation = document.getElementsByClassName("animation")[0];
animation.classList.remove("animation");
setTimeout(()=> animation.classList.add("animation"),0);
numeroSlide = numeroSlide + numero;
if (numeroSlide < 1) {
numeroSlide = 4;
}
if (numeroSlide > 4) {
numeroSlide = 1;
}
afficherSlide(numeroSlide);
}
function afficherSlide(numeroSlide) {
listImages = document.getElementsByClassName("image");
listTitres = document.getElementsByClassName("slidesTitre");
for (i = 0; i < listImages.length; i++) {
listImages[i].style.display = "none";
listTitres[i].style.display = "none";
}
listImages[numeroSlide - 1].style.display = "";
listTitres[numeroSlide - 1].style.display = "";
document.getElementById("slidesNumeros").innerHTML = numeroSlide + "/" + listImages.length;
apparaitre();
}
function apparaitre() {
document.getElementsByClassName("slidesTextes")[0].style.display = "none";
document.getElementsByClassName("slidesTextes")[0].style.display = "";
}
margin: 0px;
padding: 0px;
}
.slides{
height: 100vh;
position: absolute;
}
.slidesImages{
width: 100vw;
max-width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slidesImages img{
width: 102%;
min-width: 1000px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: slideChange;
animation-duration: 1s;
}
#keyframes slideChange{
from{opacity: 0;}
to{opacity: 1;}
}
.slidesTextes{
font-family: serif;
font-size: 7vh;
font-weight: bold;
color: white;
position: absolute;
bottom: 25vh;
left: 8%;
border: 1px solid red;
}
.animation {
animation: apparition 1s;
}
#keyframes apparition{
from{opacity: 0;bottom: 0vh;}
to{opacity:1;bottom: 25vh;}
}
.slidesTextes h2{
display: inline;
background-color: #f4743c;
padding: 0 1vw;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.slidesBoutons{
position: absolute;
bottom: 15%;
left: 8%;
width: 90%;
margin: 0.5vh 0;
}
.slidesBoutons *{
background-color: #29893f;
color: white;
font-family: sans-serif;
font-weight: bold;
font-size: 2.5vh;
float: left;
box-sizing: border-box;
height: 7vh;
line-height: 7vh;
padding: 0 1.5vw;
margin: 0 0.1vw;
text-decoration: none;
}
.slidesBoutons span{
opacity: 0.8;
}
.slidesBoutons a:hover{
background-color: #39994f;
cursor: pointer;
transition: 0.3s ease;
}
<body>
<div class="slides">
<div class="slidesImages">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
</div>
<div class="slidesTextes animation">
<span class="slidesTitre"><h2>First title</h2></span>
<span class="slidesTitre"><h2>Second title</h2></span>
<span class="slidesTitre"><h2>Third title</h2></span>
<span class="slidesTitre"><h2>Forth title</h2></span>
</div>
<div class="slidesBoutons">
<span id="slidesNumeros">1/4</span>
<a class="fleche" onclick="changeSlide(-1);"><</a>
<a class="fleche" onclick="changeSlide(1);">></a>
<a class="appelAction" href="https://tout-pres-de-chez-moi.fr/pages/demander-une-livraison-a-domicile">Button/link →</a>
</div>
</div>
</body>
html
<div class="slidesTextes animation">
javascript
animation = document.getElementsByClassName("animation")[0];
animation.classList.remove("animation");
setTimeout(()=> animation.classList.add("animation"),0);
css
.animation {
animation: apparition 1s;
}
i want the image to be overlay-ed with any color and give a tick mark on it(As it is selected) allowing only one image at a time. while clicking other image it should hide the previous one and show tick and overlay on new image.
<div class="grid-two imageandtext">
<figure>
<img src="assets/images/painting.jpg" class="img-thumbnail">
<div class="caption">
<p>Painting</p>
</div>
<div class="imageandtext image_grid">
<img src="assets/images/photography.jpg" class="img-thumbnail" >
<div class="caption1">
<p>Photography</p>
</div></div>
</figure>
</div>
it should display like below image
now it is working like this
https://jsfiddle.net/liza_susan/L8jyum77/
Here is a start, using a pseudo element for the cover, a label and an input of type radio to take care of the selection.
I wrapped the image in a label, and when clicked, it simply checks the input.
In the CSS, when an input is checked, the .image_grid input:checked + .caption::after rule apply the properties to cover and show the check mark.
Updated fiddle
.caption {
position: absolute;
top: 0;
left: 5px; /* changed to match image_grid padding */
height: 100%;
width: calc(100% - 5px); /* changed to match image_grid padding */
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
}
.caption p {
display: inline-block;
padding: 10px;
color: #fff;
background: rgba(0,0,0,0.5);
font-family: 'Myriad Pro regular';
font-size: 15.31px;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline-block;
padding-left: 5px;
}
.image_grid img { /* added rule */
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 70px; height: 70px;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
line-height: 80px;
text-align: center;
border: 2px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label for="selimg1">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg1">
<div class="caption">
<p>Painting</p>
</div>
</div>
<div class="imageandtext image_grid">
<label for="selimg2">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg2">
<div class="caption">
<p>Photography</p>
</div>
</div>
</div>
Based on a comment, here is a version where the caption is positioned inside the label, as a span (as label can only have inline element as children).
With this one doesn't need unique id on the input and can drop the for attribute, and no need to compensate for any padding and/or margin set on the image_grid.
Updated fiddle
Stack snippet
.caption {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
}
.caption span {
display: inline-block;
padding: 10px;
color: #fff;
background: rgba(0,0,0,0.5);
font-family: 'Myriad Pro regular';
font-size: 15.31px;
}
.image_grid {
display: inline-block;
padding-left: 25px;
}
.image_grid label {
position: relative;
display: inline-block;
}
.image_grid img {
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 70px; height: 70px;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
line-height: 80px;
text-align: center;
border: 2px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label>
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<input type="radio" name="selimg">
<span class="caption">
<span>Painting</span>
</span>
</label>
</div>
<div class="imageandtext image_grid">
<label>
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<input type="radio" name="selimg">
<span class="caption">
<span>Painting</span>
</span>
</label>
</div>
</div>
How about adding an image when someone hovers over it.
i.e.
.image-thumbnail:hover {
background-image: <path to image>;
background-repeat: no-repeat;
}
How about this JQuery function:
$('.image_grid').click(function() {
$('.image_grid img:nth-of-type(2)').hide();
$(this).children('img:nth-of-type(2)').show();
});
$('.image_grid').click(function() {
$('.image_grid img:nth-of-type(2)').hide();
$(this).children('img:nth-of-type(2)').show();
});
.grid-two {
width: 50%;
display: inline;
}
.caption1 {
position: absolute;
top: -51px;
left: 11px;
width: 100%;
color: #000;
font-family: Myriad Pro regular;
font-size: 15.31px;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline;
padding-left: 5px;
}
.absolute {
border: 1px solid black;
position: absolute;
left: 0px;
display: none;
width: 50%;
margin: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="grid-two imageandtext">
<figure>
<div class="imageandtext image_grid">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<div class="caption1">
<p>Painting</p>
</div>
<img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute">
</div>
<div class="imageandtext image_grid">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<div class="caption1">
<p>Photography</p>
</div>
<img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute">
</div>
</figure>
</div>
JSFiddle