I'm currently working on a merchandising page that involves photoshopping several products onto a background image. I want customers to be able to hover over a dot positioned on each product to reveal its information and provide a link similar to . However, I am looking to achieve this using only CSS. My goal is for the info and link to appear when a user hovers on the dot and then on the containing div. The challenge I face is that both elements are contained within the same div, leading to messy displays with multiple products on the page. As a beginner coder, any assistance would be greatly appreciated. Thank you!
Here's the fiddle: http://jsfiddle.net/jakvisualdesign/hvb77m8L/2/
And here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link rel="stylesheet" href="style.css">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div class="base">
<img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg" />
</div>
<div class="pop-container-a">
<img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg">
<div class="dot"></div>
</div>
</div>
</body>
</html>
Now let's take a look at the CSS: #container { position:relative; width: 960px; margin-left: auto; margin-right: auto; }
.base {
width: 100%;
height: 100%;
position: absolute;
}
#container.pop-container-a img {
position: absolute;
}
.dot {
width: 10px;
height: 10px;
position: absolute;
background-color: red;
z-index: 10;
border-radius: 50%;
}
.pop-container-a img {
position:absolute;
opacity: 0;
width: 150px;
transition: opacity .5s ease;
}
.pop-container-a:hover .dot, .pop-container-a:hover img {
opacity: 1;
}
.pop-container-a {
position: absolute;
top: 100px;
left: 50px;
display: inline-block;
}