Background image figure first when doing onclick

Navigation
0

Good I do not understand because I figure the background image when doing onclick in an image is as if the opacity is giving me in both photos. This is the div that contains the image 

<div class="imgs" id="imgs"><img src="img/24.jpg" width="100%" height="100%" class="image" alt="img1" onClick="imgvis(1)" id="image"/></div>

and this is the function when doing onclick 

var src = document.getElementById("image").src;
                document.getElementById("divhidden").style.visibility="visible";
                document.getElementById("backimg").src=src;

and this div that contains the image that opens 

<div class="container2" id="divhidden" style="height: 963px;" onClick="imgvis(0)">
            <figure class="figure">
                <img width="100%" height="100%" id="backimg">
            </figure>

CSS 

/*DIV que contiene image*/
.imgs:hover {
    width: 25%;
    border: 1px solid #FFFFFF;
    height: 557px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    float: left;
	background-color: orangered;
}
/*imagen*/
.image:hover{
	opacity: 0.8;
	cursor: zoom-in;

}
/*Figure*/
.figure{
    width: 30%;
    text-align: center;
	position: fixed;
}
/* container 2 que contiene figure y imagen a mostrar al hacer click*/
.container2{
    width: 100%;
    height: 100%;
    position: absolute;
   	align-items: center;
	background: rgba(0,0,0,0.4);
	visibility: hidden;
	cursor: zoom-out;
}

Looks like this when taking the pointer out of the image, it looks good

    
asked by Nobuy Nobuyback back 20.09.2018 в 21:53
source

1 answer

0

I do not think I understand very well how you are asking your question, but as I understand reading the code, you want that when you click on an image it is replaced in the div divhidden 

function imgvis(e){
  var src = e.src;
  document.getElementById("divhidden").style.visibility="visible";
  document.getElementById("backimg").src=src;
}
<div class="imgs" id="imgs"><img src="https://www.freeiconspng.com/uploads/smiley-icon-30.png"  class="image" alt="img1" onClick="imgvis(this)" id="image"/></div>

<div class="imgs" id="imgs"><img src="https://vignette.wikia.nocookie.net/scream-queens/images/5/52/White-smiley-face-png-white_frowning_face_u2639_icon_256x256.png/revision/latest?cb=20160627203959"  class="image" alt="img1" onClick="imgvis(this)" id="image"/></div>
<hr>

<div class="container2" id="divhidden" style="height: 963px;" onClick="imgvis(0)">
            <figure class="figure">
                <img width="100%" height="100%" id="backimg">
            </figure>
    
answered by 20.09.2018 в 22:11
Datatables shows last record of a timer countdown Round corners when clicking [duplicate]