Assign image to different buttons - javascript

How can I make the picture change with each different button clicked and make the picture shown to be the default?
From the code snippet, please notice how each button should change the image.
Thank you!
* {
box-sizing: border-box;
}
.imagebox {
width: 50%;
float: left;
height: 300px;
position: relative;
}
.imagebox img {
position: relative;
top: 40%;
transform: translateY(-50%);
overflow: hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height: 300px;
float: right;
position: relative;
overflow: hidden;
}
.textbox {
color: #000000;
position: absolute;
text-align: center;
width: 100%;
padding: 20px;
top: 53%;
transform: translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
display: flex;
flex-direction: column;
}
<div class="imagebox"></div>
<img src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687" alt="">
<div class="textbox-cont">
<div class="textbox">
Pick a color to see how it will look<br>
<button style="margin: 8px;">Cobalt Blue</button><br>
<button style="margin: 8px">Cobaltt Blue</button><br>
<button style="margin: 8px">Cardinal Red</button><br>
<button style="margin: 8px">Coral Orange</button><br>
</div>
</div>


You can addEventListener to each button and change the image src attribute depending on the button id:
const img = document.getElementById('img');
for (let button of document.getElementsByTagName('button')) {
button.addEventListener('click', () => {
switch (button.id) {
case 'but1':
img.src = "https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687";
break;
case 'but2':
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTgfERcK1BcdgSekipirrCw6zpQJ9l40h48Musvp7-dfy8Ym3Yl&usqp=CAU";
break;
case 'but3':
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS9wvzviWw6ag6p_aZgw6kRs267_3jpiI_gGCxvLh7U9QIVAmQa&usqp=CAU";
break;
case 'but4':
img.src = "https://xzdl43v0mdf2m45tz2aj7kkv35-wpengine.netdna-ssl.com/wp-content/uploads/2010/10/orange-780x400.jpg";
break;
}
});
}
*{
box-sizing:border-box;
}
.imagebox {
width: 50%;
float: left;
height:300px;
position:relative;
}
.imagebox img{
position:relative;
top:40%;
transform:translateY(-50%);
overflow:hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height:300px;
float: right;
position:relative;
overflow:hidden;
}
.textbox{
color: #000000;
position:absolute;
text-align: center;
width:100%;
padding:20px;
top:53%;
transform:translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
display: flex;
flex-direction: column;
}
<div class="imagebox">
<img id="img" src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"
alt="">
</div>
<div class="textbox-cont">
<div class="textbox">
Pick a color to see how it will look<br>
<button style="margin: 8px" id="but1">Cobalt Blue</button><br>
<button style="margin: 8px" id="but2">Cobaltt Blue</button><br>
<button style="margin: 8px" id="but3">Cardinal Red</button><br>
<button style="margin: 8px" id="but4">Coral Orange</button><br>
</div>
</div>

Related

Span does not close in modal window

Im not really sure why the span tag is not closing
Does it have to do with my selection being a div in js?
Please let me know what I can change in order to make this work.
Ive tried to switch out the labels of the classes and tested selectors as well
Here is my code.
document.querySelectorAll('.imageContainer div').forEach(image => {
image.onclick = () => {
document.querySelector('.popup-image').style.display = 'block';
document.querySelector('.popup-image img').div = image.getAttribute('data-img');
}
});
document.querySelector('.popup-image span').onclick = () => {
document.querySelector('.popup-image').style.display = 'none';
};
/* modal */
.container .popup-image {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.641);
height: 100%;
width: 100%;
z-index: 100;
display: none;
}
.container .popup-image span {
position: absolute;
top: 0;
right: 10px;
font-size: bolder;
color: #fff;
cursor: pointer;
z-index: 100;
}
.container .popup-image img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid #fff;
width: 750px;
object-fit: cover;
}
#media only screen and (max-width: 600px) {
.container .popup-image img {
width: 99%;
}
}
<div class="imageContainer">
<div class="entry work-entry branding">
<div class="entry-image image imageBG" data-img="./src/assets/img/feature1.jpeg">
</div>
<div class="work-entry-hover">
<div class="work-entry-content">
<div class="work-entry-title">Brand</div>
<div class="work-entry-cat">Los Angeles, CA</div>
</div>
</div>
</div>
<!-- modal -->
<div class="popup-image">
<img src="./src/assets/img/feature1.jpeg" alt="">
<span>×</span>
</div>
</div>

Since the 'x' button is inside the other element, the function to set display: block is being called when you click on the span, which is overriding the display: none; that you're setting. You can stop this by running e.stopPropagation(); in the event handler, which will prevent the click event from triggering on any parent elements.
document.querySelectorAll('.imageContainer div').forEach(image => {
image.onclick = () => {
document.querySelector('.popup-image').style.display = 'block';
document.querySelector('.popup-image img').div = image.getAttribute('data-img');
}
});
document.querySelector('.popup-image span').onclick = (e) => {
e.stopPropagation();
document.querySelector('.popup-image').style.display = 'none';
};
/* modal */
.container .popup-image {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.641);
height: 100%;
width: 100%;
z-index: 100;
display: none;
}
.container .popup-image span {
position: absolute;
top: 0;
right: 10px;
font-size: bolder;
color: #fff;
cursor: pointer;
z-index: 100;
}
.container .popup-image img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid #fff;
width: 750px;
object-fit: cover;
}
#media only screen and (max-width: 600px) {
.container .popup-image img {
width: 99%;
}
}
<div class="imageContainer">
<div class="entry work-entry branding">
<div class="entry-image image imageBG" data-img="./src/assets/img/feature1.jpeg">
</div>
<div class="work-entry-hover">
<div class="work-entry-content">
<div class="work-entry-title">Brand</div>
<div class="work-entry-cat">Los Angeles, CA</div>
</div>
</div>
</div>
<!-- modal -->
<div class="popup-image">
<img src="./src/assets/img/feature1.jpeg" alt="">
<span>×</span>
</div>
</div>

Need help to span <div> elements in one row

I want exactly like this website: https://www.petzl.com/INT/en
I want to show the text that is the center having 3 divs "Services" "Training" and "Shop" to have in one line or row.
I tried inline-block, padding, margins, float etc. but maybe I am doing something wrong.
If I dont use this line "place-content:center;" it places it to left with a lot of spaces.
My website link: beta.edgerope.com
Please find code below:
<style>
.image{
height: 800px;
width: 100%;
display: grid;
place-content:center;
justify-content:middle;
color: white;
font-size:30px;
background-color: #;
background-position: center;
background-size: cover;
}
.training{
display:inline-block;
padding-top: 50px;
padding-right: 1500px;
padding-bottom: 50px;
padding-left: 1px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 1;
display: inline-block;
}
.div{
dipslay
}
</style>
<div class="image">
<div class="services">
<span class="services" onclick="window.location=''">Services</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ">
</div>
<div class="Training">
<span class="training" onclick="window.location='beta.edgerope.com/courses'">Training</span>
<img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
<div class="shop">
<span class="shop" onclick="window.location='beta.edgerope.com/shop'">Shop</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div>
</div>
:

You can use CSS flex property something like this
.image {
display: flex;
justify-content: space-evenly;
align-items: center;
}

Automatic div sizing to fill spacing from svg on screen resizing

I'm wondering if it's possible to have the 4 colored divs around the black svg, to fill in the extra width or height of the blank space (the pink) when the screen is resized. There's a pink div behind the logo, to give you and example of the space that needs to be filled by the 4 colored divs. Is something like this possible in pure CSS and HTML or is JS needed? Any info on this helps, thanks.
<style>
ul {
margin:0;
display: flex;
align-items: stretch;
justify-content: space-between;
width: 77%;
}
li {
display: block;
font-size:17px;
text-decoration:none;
}
.navtext{
background-color:orange;
width: 35%;
height:20%;
right:0px;
position:absolute;
display: flex;
align-items: center;
}
body {
margin: 0;
}
.header{
background-color:yellow;
width:100%;
height:20%;
}
.logo{
position:absolute;
left:5%;
background-color:lightblue;
height:20%;
display: flex;
align-items: center;
}
.logotext{
font-size:27px;
font-weight:bold;
}
.front {
background-color:blue;
height: 81vh;
position: relative;
z-index: 2;
width:100%;
}
.video {
background: url(https://picsum.photos/id/107/800/800) center/cover;
height: 100vh;
margin-top: -100vh;
position: sticky;
width:100%;
top: 0;
}
.container {
height:200vh;
}
.right{
right:0px;
width:50%;
Height:91%;
position:absolute;
background-color:pink;
/*display: flex;*/
justify-content: center;
align-items: center;
}
.logoanimecont{
text-align:center;
width:75%;
margin:auto;
}
.left{
width:50%;
Height:91%;
background-color:green;
display: flex;
justify-content: center;
align-items: center;
}
.titlebox {
text-align:center;
width:75%;
background-color:purple;
margin:auto;
}
.title {
font-size:30px;
text-align:center;
}
.hide{ display:none }
.rightbordertop{
width:100%;
height:25%;
background-color:red;
}
.rightborderbottom{
width:100%;
height:25%;
bottom:0px;
position:absolute;
background-color:darkgrey;
}
.rightborderleft{
width:25%;
height:75%;
background-color:brown;
}
.rightborderright{
right:0px;
height:75%;
width:25%;
background-color:blue;
position:absolute;
}
svg { position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 50%;
height: 50%;}
</style>
<div class="container">
<div class="front">
<div class="header">
<div class="logo">
<span class="logotext">f-e</span>
</div>
<div class="nav">
<div class="navtext">
<ul>
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="left">
<div class="titlebox">
<span class="title">Random text, centered v and h.</span>
</div>
<div class="right">
<div class="rightbordertop"></div>
<div class="rightborderright"></div>
<div class="rightborderleft"></div>
<div class="rightborderbottom"></div>
<div class="logoanimacont">
<div class="logoanime">
<svg viewBox="0 0 70 70">
<path id="metabolism" d="M0,0v72h72V0H0z M45.38,12.19l-1.21,1.66c-0.16,0.23-0.35,0.26-0.57,0.09c-1.47-1-2.85-1.18-4.13-0.53
c-1.41,0.75-2.11,2.19-2.11,4.31v9.47h4.62c0.28,0,0.42,0.15,0.42,0.44v2.06c0,0.29-0.14,0.44-0.42,0.44h-4.62v23.85
c0,0.29-0.14,0.44-0.42,0.44h-2.02c-0.26,0-0.39-0.15-0.39-0.44V30.14H31.8c-0.28,0-0.42-0.15-0.42-0.44v-2.06
c0-0.29,0.14-0.44,0.42-0.44h2.72v-9.47c0-1.58,0.32-2.98,0.97-4.19c0.64-1.23,1.55-2.15,2.72-2.75c1.09-0.56,2.25-0.77,3.5-0.63
c1.25,0.12,2.44,0.59,3.59,1.41C45.53,11.73,45.56,11.94,45.38,12.19z"/>
<path id="technique" class="hide" d="M0,0v72h72V0H0z M40.05,36.57c0,0.22-0.11,0.33-0.33,0.33h-8.62c-0.22,0-0.33-0.11-0.33-0.33V35
c0-0.2,0.11-0.3,0.33-0.3h8.62c0.22,0,0.33,0.1,0.33,0.3V36.57z"/>
<path id="digital" class="hide" d="M0,0v72h72V0H0z M45.89,36.15c0,0.19-0.09,0.29-0.28,0.3l-16.83,1.48c0.47,1.7,1.41,3.1,2.81,4.2
c1.44,1.11,3.06,1.66,4.88,1.66c1.38,0,2.66-0.34,3.87-1.01c1.19-0.66,2.15-1.56,2.88-2.72c0.11-0.19,0.26-0.23,0.45-0.12
l1.36,0.77c0.19,0.12,0.23,0.28,0.12,0.47c-0.94,1.48-2.18,2.66-3.73,3.52c-1.53,0.86-3.18,1.29-4.95,1.29
c-2.81,0-5.21-0.99-7.2-2.98c-2-2-3-4.41-3-7.22c0-2.86,0.96-5.27,2.88-7.24c1.91-1.97,4.24-2.95,7.01-2.93
c2.69,0.02,4.98,1.01,6.89,2.98c1.89,1.95,2.84,4.3,2.84,7.03V36.15z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="video"></div>
</div>
<div style="height:150vh"> more content later </div>

There are many ways to do it, but without information what do blue and red containers contain content wise, we can only guess. One suggestion though, don't use position: absolute that much, master flex layout A complete guide to flexbox. This solution requires grouping of central three sections into one (maroon, pink and blue containers are now wrapped in div with inline style):
body {
margin: 0;
}
.right {
right: 0px;
width: 50%;
height: 91%;
position: absolute;
background-color: pink;
justify-content: center;
align-items: center;
}
.hide { display: none }
.rightbordertop {
width: 100%;
height: 25%;
background-color: red;
}
.rightborderbottom{
width: 100%;
height: 25%;
bottom: 0px;
position: absolute;
background-color: darkgrey;
}
.rightborderleft{
height: 100%;
flex-grow: 1;
background-color: brown;
}
.rightborderright{
height: 100%;
flex-grow: 1;
background-color: blue;
}
svg {
height: 100%;
}
<div class="right">
<div class="rightbordertop"></div>
<div style="height: 50%; display: flex;">
<div class="rightborderleft"></div>
<svg viewBox="0 0 70 70">
<path id="metabolism" d="M0,0v72h72V0H0z M45.38,12.19l-1.21,1.66c-0.16,0.23-0.35,0.26-0.57,0.09c-1.47-1-2.85-1.18-4.13-0.53
c-1.41,0.75-2.11,2.19-2.11,4.31v9.47h4.62c0.28,0,0.42,0.15,0.42,0.44v2.06c0,0.29-0.14,0.44-0.42,0.44h-4.62v23.85
c0,0.29-0.14,0.44-0.42,0.44h-2.02c-0.26,0-0.39-0.15-0.39-0.44V30.14H31.8c-0.28,0-0.42-0.15-0.42-0.44v-2.06
c0-0.29,0.14-0.44,0.42-0.44h2.72v-9.47c0-1.58,0.32-2.98,0.97-4.19c0.64-1.23,1.55-2.15,2.72-2.75c1.09-0.56,2.25-0.77,3.5-0.63
c1.25,0.12,2.44,0.59,3.59,1.41C45.53,11.73,45.56,11.94,45.38,12.19z"/>
</svg>
<div class="rightborderright"></div>
</div>
<div class="rightborderbottom"></div>
<div class="logoanimacont"></div>
</div>

For simplicity stake, I focused only on the right side of you page, where the svg is surrounded by the four div. Also be aware that I used new class names to make the code easier to understand.
I used flexbox one level at a time to achieve this effect. You can use the new .container div and place it wherever you wish on your page (just be aware of the possible conflicting class names with your current project).
NOTE: Run the code snippet on full screen so you can test the effect.
* {
margin: 0;
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
background: pink;
display: flex;
flex-direction: column;
}
.top {
background: red;
flex: 1;
}
.middle {
display: flex;
align-items: center;
justify-content: center;
}
.bottom {
background-color: dimgray;
flex: 1;
}
.left {
height: 100%;
background: brown;
flex: 1;
}
.center {
width: 40%;
height: auto;
}
.right {
height: 100%;
background: blue;
flex: 1;
}
svg {
display: flex;
align-items: center;
}
<div class="container">
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center">
<svg viewBox="0 0 70 70">
<rect width="100" height="100" /></svg>
</div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>

I just want to add this new example to show that the my last answer can and will achieve the desired effect. One just need to add the specifics of the project (which are unknown to us).
* {
margin: 0;
padding: 0;
}
.header {
background: yellow;
width: 100%;
height: 15vh;
}
.nav {
background: orange;
width: 35%;
height: 15%;
position: absolute;
right: 0;
}
.content {
display: flex;
align-items: center;
font-family: sans-serif;
background: purple;
}
.left-column {
position: absolute;
left: 0;
width: 50%;
height: 70%;
background: green;
display: flex;
align-items: center;
justify-content: center;
}
.right-column {
position: absolute;
right: 0;
width: 50%;
height: 70%;
background: pink;
display: flex;
flex-direction: column;
}
.top {
background: red;
flex: 1;
}
.middle {
display: flex;
align-items: center;
justify-content: center;
}
.bottom {
background-color: dimgray;
flex: 1;
}
.left {
height: 100%;
background: brown;
flex: 1;
}
.center {
width: 30%;
/* size of the svg */
height: auto;
}
.right {
height: 100%;
background: blue;
flex: 1;
}
svg {
display: flex;
align-items: center;
}
<body>
<div class="header">
<div class="nav"></div>
</div>
<div class="left-column">
<div class="content">Center and Middle Content</div>
</div>
<div class="right-column">
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center">
<svg viewBox="0 0 70 70">
<rect width="100" height="100" />
</svg>
</div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
</body>

Had to re-write using flexbox to obtain what I wanted. Incase anyone comes across a problem similar, im posting my answer because it achieved what I needed after re-writing the code.
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#right>* {
flex: 1 1;
}
#logo {
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
left:0;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsidebottom{
background-color:pink;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div id="logo"></div>
<div id="rightsidebottom"></div>
</div>
</div>

Popup used to display on webpage, but no longer does

I did have a popup on one of my webpages that used to display when I clicked a link but, while not knowing what's changed, It appears to have stopped displaying when I click the link. When using 'Inspect Element' using Chrome, the correct elements have the attribute 'display: block !important;' so should display.
Here is the code snippet:
function popup() {
var popup = document.getElementById("popup")
var popupLayer = document.getElementById("popup-layer")
popup.classList.toggle("show")
popupLayer.classList.toggle("show")
}
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.click {
cursor: pointer;
}
.popup {
background-color: white;
height: 70%;
width: 70%;
display: none;
position: relative;
border: 1px solid;
padding: 20px;
z-index: 2;
align-self: center;
}
.popup-wrapper {
height: 100%;
width: 100%;
visibility: hidden;
display: none;
position: absolute;
display: flex;
justify-content: center;
}
.show {
display: block !important;
}
.popup-layer {
background-color: gray;
opacity: 0.3;
position: absolute;
height: 100%;
width: 100%;
margin-top: -20px;
z-index: 1;
display: none;
}
#page-1 {
background-color: #b3d9ff;
height: 100vh;
width: 100%;
}
<div id="page-1">
<div id="popup-wrapper" class="popup-wrapper">
<div id="popup" class="popup center">
<a class="click" onclick="popup()">Click me!</a>
</div>
</div>
<a class="click" onclick="popup()">Click me!</a>
<div id="popup-layer" class="popup-layer">
</div>
</div>

This is really a debugging question which is supposed to be done by you or at the least told us what you think it is.
Anyway, in .popup-wrapper I took out height as I presume it was spanning out of the view.
function popup() {
var popup = document.getElementById("popup");
var popupLayer = document.getElementById("popup-layer");
popup.classList.toggle("show");
popupLayer.classList.toggle("show");
}
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.click {
cursor: pointer;
}
.popup {
background-color: red;
height: 70%;
width: 70%;
display: none;
position: relative;
border: 1px solid;
padding: 20px;
z-index: 2;
align-self: center;
}
.popup-wrapper {
width: 100%;
display: none;
position: absolute;
display: flex;
justify-content: center;
}
.show {
display: block !important;
}
.popup-layer {
background-color: gray;
opacity: 0.3;
position: absolute;
height: 100%;
width: 100%;
margin-top: -20px;
z-index: 1;
display: none;
}
#page-1 {
background-color: #b3d9ff;
height: 100vh;
width: 100%;
}
<div id="page-1">
<div id="popup-wrapper" class="popup-wrapper">
<div id="popup" class="popup center">
<a class="click" onclick="popup()">Click me!</a>
</div>
</div>
<a class="click" onclick="popup()">Click me!</a>
<div id="popup-layer" class="popup-layer"></div>
</div>

yes thats popup-wrapper that is origin of the problem. But seing that you put your events in the a element its prefered to use this code to prevent the redirection or use button instead of this
var popupDiv = document.getElementById("popup");
var popupLayer = document.getElementById("popup-layer");
var clickMe=document.querySelectorAll(".click");
function popup() {
popupDiv.classList.toggle("show");
popupLayer.classList.toggle("show");
}
clickMe.forEach(function(elem){
elem.addEventListener('click',function(e){
e.preventDefault();
popup()},false);
});

CSS thus change this part
.popup-wrapper {
height: 50%;
width: 100%;
display: none;
position: absolute;
display: flex;
z-index: 0;
justify-content: center;
}
JS for the best way
var popupDiv = document.getElementById("popup");
var popupLayer = document.getElementById("popup-layer");
var clickMe=document.querySelectorAll(".click");
function popup() {
popupDiv.classList.toggle("show");
popupLayer.classList.toggle("show");
}
clickMe.forEach(function(elem){
elem.addEventListener('click',function(e){
e.preventDefault();
popup()},false);
});

apply same jquery function to element present inside parent div

code jsFiddle
I applied jquery's click function to 'li#info' element. But when I click, it perform jquery to element of different parent also ('#theme div#info-overlay').
I want, whenever 'li#info' is clicked on the parent element('#theme') then it perform function to its child element only(div#info-overlay).
Like in the code, by clicking on 'Fe' it open overlay on both the block. But i want it to show overlay only to the block for which 'Fe'is clicked.
sorry, I am new in jquery.

I got your point. you just need to change one line of code
because both divs have same ids thats why both are appearing on click
and it's not a good practice to use same id multiple time on a single file.
it will make issue somewhere sometime.
i have change this line
$("div#info-overlay").toggle('100');
into this
$(this).parents('#theme').find("#info-overlay").toggle('100');
check this
JS Fiddle

use this to find div $(this).parents('#theme').find("#info overlay").toggle('100');
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
$(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
// $("div#info-overlay").toggle('100');
});
});
/*
theme block
*/
.theme{
width: 100%;
height: 250px;
background-color: #fff;
margin: 20px auto;
}
.theme .header{
width: 100%;
height: 200px;
position: relative;
background-color: #eee;
}
.theme .header *{
display: none;
}
.theme .header .overlay{
position: absolute;
background-color: #fff;
left: 60px;
top: 10px;
width: 83%;
height: 180px;
z-index: 80;
}
.theme .header .about{
position: absolute;
left: 10px;
top: 10px;
}
.theme .header .about li{
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #FED200;
opacity: .5;
color: #fff;
padding: 5px 10px;
margin: 5px 0;
}
.theme .footer{
width: 100%;
height: 50px;
padding: 0 20px;
}
.theme .footer .left{
width: 85%;
display: inline-block;
overflow-y:hidden;
height: 50px;
float: left;
padding: 10px 0;
}
#media screen and (min-width:620px) {
.theme{
width: 70%;
}
}
#media screen and (min-width:720px) {
.theme{
width: 49%;
display: inline-block;
}
}
#media screen and (min-width:920px) {
body .container.theme-holder {
width: 70%;
}
}
#media screen and (min-width:1024px) {
body .container.theme-holder {
width: 95%;
}
.theme{
width: 32%;
}
}
#media screen and (min-width:1200px) {
body .container.theme-holder {
width: 85%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate sdfsfdsfdsfsd</p>
</div>
</div>
</div>
</div>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate dfsasdfdsafs</p>
</div>
</div>
</div>
</div>

Categories