I ran into a problem and couldn't find an easy solution. I have a couple of tags which have an img assigned to them and I would like that their respective image is displayed in another div, when I hover over it or click the tag. At the moment the images will be shown, but at the location of the hover tag.
Jquery or Js is also an option :)
EDIT As of now the IMG is shown in the left box and I want to be displayed inside the right box on hover. Preferable would be if it would also work with onClick so it stays when I move my mouse away.
There are multiple images (about 100 different ones)
I will provide some code below
.container {
display: flex;
width: 100%;
height: 500px;
}
.left {
width: 50%;
height: 500px;
}
.right {
width: 50%;
height: 500px;
}
figref:hover img {
visibility: visible;
display: block;
box-shadow: 2px 2px 4px black;
}
figref img {
display: none;
}<div class="container">
<div class="left">
lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a
<figref idref="f0001">
FIG. 1A <!--ATM When I hover this the Image is displayed below-->
<img class="normal" src="./images/imgf0001.png">
</figref>
<figref idref="f0002">
FIG. 2A
<img class="normal" src="./images/imgf0002.png">
</figref>
lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a
</div>
<div class="right"> <!--Here is where the image should be displayed when I hover the figureref-->
</div>
</div>.container {
display: flex;
width: 100%;
height: 500px;
}
.left {
width: 50%;
height: 500px;
}
.right {
width: 50%;
height: 500px;
}
figref img {
display: none;
position: absolute;
max-width:400px;
border:8px solid #fff;
border-radius:6px;
}
figref:hover img {
display: inline-block;
box-shadow: 2px 4px 35px rgba(0,0,0,0.5);
animation-name: example;
animation-duration: 1s;
}
@keyframes example {
0% {opacity:0;box-shadow: 0px 0px 10px rgba(0,0,0,0.5);}
40% {opacity:1;box-shadow: 0px 0px 10px rgba(0,0,0,0.5);}
100% {opacity:1;box-shadow: 2px 4px 35px rgba(0,0,0,0.5);}
}
figref{
font-weight:800;
}
figref:hover {
color:#52f;
}<div class="container">
<div class="left">
lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a
<figref idref="f0001">
FIG. 1A <!--ATM When I hover this the Image is displayed below-->
<img class="normal" src="https://api.heinsoe.com/v3/portfolio/storage/20200101/zmt.jpg">
</figref>
lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a
</div>
<div class="right"> <!--Here is where the image should be displayed when I hover the figureref-->
</div>
</div>If you put the image under the .right div, the image and the figref are no longer siblings and hence it is not a CSS thing to control the visibility.
If the structure is a must, you would need to use javascript. Check the snippet below:
document.querySelector('figref').addEventListener('mouseenter', function(){
document.querySelector('.right > img').style.display = 'block'
})
document.querySelector('figref').addEventListener('mouseleave', function(){
document.querySelector('.right > img').style.display = 'none'
}).container {
display: flex;
width: 100%;
height: 500px;
}
.left {
width: 50%;
height: 500px;
}
.right {
width: 50%;
height: 500px;
}
.right > img {
display: none;
}
figref:hover {
color: red;
}
figref:hover + .right > img {
display: block;
box-shadow: 2px 2px 4px black;
}<div class="container">
<div class="left">
lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a
<figref idref="f0001">
FIG. 1A
</figref>
lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a
</div>
<div class="right">
<img class="normal" src="https://images.unsplash.com/photo-1646864052090-071a579e1346?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80">
</div>
</div>.
This can also easily be done with JS as you probably know. To do this with css, you want to make sure the element you want displayed above the parent has the following css:
position: absolute; //ensures position is relative to nearest positioned ancestor
z-index: 2;
width: 36px;
height: 36px;
Full answer with updated css:
.container {
display: flex;
width: 100%;
height: 500px;
}
.left {
width: 50%;
height: 500px;
}
.right {
width: 50%;
height: 500px;
}
figref:hover img {
visibility: visible;
display: block;
position: absolute;
width: 36px;
height: 36px;
z-index: 2;
box-shadow: 2px 2px 4px black;
}
figref img {
display: none;
}<div class="container">
<div class="left">
lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a
<figref idref="f0001">
FIG. 1A <!--ATM When I hover this the Image is displayed below-->
<img class="normal" src="./images/imgf0001.png">
</figref>
lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a
</div>
<div class="right"> <!--Here is where the image should be displayed when I hover the figureref-->
</div>
</div>