I'm creating a merchandising page where there will be several products photoshopped onto the background image. I want customers to be able to hover on a dot positioned on the product to reveal it's information and contain a link similar to http://www.wineenthusiast.com/custom-cellars/ but I want to do it in pure CSS. I only want the info and link to appear when a user hovers on the dot and then on the containing div. The issue I keep running into is that since both elements are contained in the same div, the corresponding image is displayed. This will be too messy when there are 15 products on this page. Still a noob coder so any help would be greatly appreciated, thanks!
Here's the fiddle: http://jsfiddle.net/jakvisualdesign/hvb77m8L/2/
and 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>
and 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;
}
Fixed that up for you: http://jsfiddle.net/hvb77m8L/3/
The trick is using the adjacent sibling selector + to allow hovering on the dot to affect the image next to it. So, this:
.pop-container-a:hover .dot, .pop-container-a:hover img {
opacity: 1;
}
becomes this:
.dot:hover + img {
opacity: 1;
}
Edit: and since that selects an element immediately following the targeted one, also note that I changed this:
<img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg">
<div class="dot"></div>
to this:
<div class="dot"></div>
<img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg">
Edit 2: To make the images remain when hovered on, you can make them inactive by default by setting their width to 0:
.pop-container-a img {
opacity: 0;
width: 0; // in addition to being invisible, the image will not respond to hovering
position: absolute;
transition: opacity .5s ease;
}
Then, when the dot is hovered, return the images to normal width and normal opacity:
.dot:hover + img {
width: 150px;
opacity: 1;
}
And when the image is in this state, it can now remain there with a hover effect:
.dot + img:hover {
width: 150px;
opacity: 1;
}
A new fiddle to demonstrate this: http://jsfiddle.net/hvb77m8L/6/
Related
I want to do the following hover slider:
The blue part should slide from left to right when hovered on the red part. It should slide from the right part of the red part and not showing (i.e. should be sliding behind the red part). Blue part should initially be hidden behind the red and should not show at all The blue part will be bigger than the red part so it had to be hidden with overflow or something else. There should be no opacity transitioning, however other transitioning is acceptable
This is what I have thus far:
HTML:
<div class="container">
<div class="static-content">
</div>
<div class="overlay">
OverLay Content - this will be some text
</div>
</div>
CSS:
.container {
position: relative;
width: 200px;
height: 100px;
.static-content {
display: block;
background-color: red;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
right: 0;
background-color: #008CBA;
height:100%;
width: max-content;
transition: .5s ease;
}
}
.container:hover .overlay {
transform: translateX(100%);
height: 100%;
}
Problem is blue part is infront of red part.
add this to .overlay element z-index: -1; to make it behind the red
div
and if the red div is smaller so it doesnt hide it all then u can but transparent colored div at the part that u want to hide since u dont want to do it with overflow
You can give your blue div style a z-index to take it under the red one like this :
.overlay {
position: absolute;
z-index: -1;
top: 0;
right: 0;
background-color: #008CBA;
height:100%;
width: max-content;
transition: .5s ease;
}
I'm relatively new to coding, and working on a repo in Github. I have 12 clickBoxes on the same page that I'm applying a hover effect to, so that a PNG appears on hover. When the hover effect is applied, the clickBox no longer works, and vice versa. I'm pretty sure it's an issue with HTML
The clickBox I'm currently working on is .clickBox-Ministries. This is the hover effect in CSS:
.clickBox-Ministries,
.png-overlay {
position: absolute;
width: 6%;
height: 14%;
top: 12%;
left: 11%;
}
.png-overlay{
/*display: none;*/
position: absolute;
width: 12%;
height: 13%;
top: 12.5%;
left: 8%;
z-index: 1;
opacity: 0;
}
.common-parent{
position: relative;
}
img.png-overlay:hover{
display: inline;
opacity: 1;
/*transition: opacity 0.1s ease-in-out;*/
cursor: pointer;
}
When I set up the HTML this way, the clickBox doesn't work and neither does the hover effect:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<!-- Main Nav -->
<div class=clickContainer>
<div class="common-parent">
<div class="clickBox-Ministries">
</div>
<img class="png-overlay" src="Ministries_Overlay.png">
</div>
When I remove the closing tag from the .common-parent, the PNG hover effect works but the clickBox does not.
Finally, when I remove the closing tag from .clickBox-Ministries, the clickBox works but the PNG hover effect does not:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<!-- Main Nav -->
<div class=clickContainer>
<div class="common-parent">
<div class="clickBox-Ministries">
<img class="png-overlay" src="Ministries_Overlay.png">
</div>
Any thoughts?
Basically, your clickBox-Ministries div has no height because it has no content - except when you leave off its terminating /div, in which case it thinks the img is its content and takes on the image's natural height.
By default, div elements are block level elements. See https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements for discussion on how they pick up their default width and height.
One way to check what is happening is to inspect the elements via your browser's dev tools. You'll see in your example that the div takes on the width of the viewport (possibly minus a bit for default margin, depending on what you have box-sizing set as) and height of 0 unless it has the img within it.
On a more minor point, to make the image fade out gradually in the same way as it fades in, put the transition on the img class, not on just the hover.
Here is a snippet which does these alterations. It's a bit strange because without any natural height to the clickable div it's only the img that does anything (on hover in that case). If you want the div above the img to be clickable it needs some clickable area, i.e. some content or to have height and width explicitly set.
So when you run this snippet you get a blank page and have to sort of wave the mouse around near the top left to get the img to appear.
body {
width: 100vw;
height: 100vh;
}
.clickContainer {
width: 100%;
height: 100%;
}
.clickBox-Ministries,
.png-overlay {
position: absolute;
width: 6%;
height: 14%;
top: 12%;
left: 11%;
}
.png-overlay{
/*display: none;*/
position: absolute;
width: 12%;
height: 13%;
top: 12.5%;
left: 8%;
z-index: 1;
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
.common-parent{
position: relative;
width: 100%;
height: 100%;
}
img.png-overlay:hover{
display: inline;
opacity: 1;
cursor: pointer;
}
<!-- Main Nav -->
<div class=clickContainer>
<div class="common-parent">
<div class="clickBox-Ministries">
</div>
<img class="png-overlay" src="https://picsum.photos/id/1015/200/300">
</div>
</div>
I'm trying to have it so that when I hover on an <img> tag, a div will appear over it. I want it to be a white overlay with text inside of it.
I cannot make the image a background-image, as much as I would like to. My code uses width:percent/max-width:pixels and height:auto/max-height:pixels, so without the img there, nothing would show up. And to my knowledge, there is no solution to that issue.
I attempted to give the image a unique id and apply a id:hover .class to have the div appear, but it didn't respond to any coding I gave it, let alone work right. I then tried putting the id on a div of its own over putting it on the picture with still no yield.
I also tried to make a div with the image as a background pic and made the hover as desired. I tried to make the div not implode by putting in another div that has the image constraints, but because of the height:auto, it didn't work.
I refuse to set height/width as pixels, as it would mess up the rest of my coding and one of the major reasons I'm coding what I am. So, if it's not possible because of this, that's fine; Just tell me.
My CSS is as follows:
#logo {
text-align: center;
width:100%;
max-width:769px;
height:auto;
overflow:hidden;
}
#bannerpic {
max-width:769px;
max-height:300px;
width:100%;
height:auto;
}
#bannerpic .logobody {
display:none;
}
#bannerpic:hover .logobody {
display:inline;
background-color:rgba(255,255,255,0.5);
width:100%;
height:100%;
}
My HTML is this:
<div id="logo">
<img id="bannerpic" src="https://dl.dropboxusercontent.com/u/67673862/logoTEMP.png">
<div class="logobody">text</div>
</img>
</div>
I don't know if you need to be able to click the image, but you can overlay text with absolute positioning.
#logo {
text-align: center;
height: auto;
overflow: hidden;
position: relative;
max-width: 469px;
}
#bannerpic {
width: 100%;
height: auto;
}
.logobody {
position: absolute;
background-color: pink;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.logobody:hover {
opacity: 1;
}
<div id="logo">
<img id="bannerpic" src="https://dl.dropboxusercontent.com/u/67673862/logoTEMP.png" />
<div class="logobody">text</div>
</div>
How about this:
#logo {
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.logobody {
position: absolute;
z-index: 2;
left: 0;
top: 0;
background-color: rgba(255,255,255,0.75);
visibility: hidden;
height: 100%;
width: 100%;
}
#logo:hover .logobody{
visibility: visible;
}
#bannerpic {
max-width:769px;
max-height:300px;
width:100%;
height:auto;
}
Here's a JSFiddle link for it:
https://jsfiddle.net/zVBDc/790/embedded/result/
Note: My example is using 0.75 alpha for the background. 0.5 seemed too low. Set it to whatever you prefer, though.
SOLVED FIDDLE:
I can't figure out how to display an image(two) above/over my current visible image(one) when hovered.
Html:
<img class="two" src="img/2.png" alt="bulb">
<img class="one" src="img/1.png" alt="me">
CSS:
.one {
display: block;
margin: 0 auto;
padding-top: 50px;
}
.two {
opacity: 0;
}
.one:hover .two {
opacity: 1;
}
What am I doing wrong?
Edit: If you want to show another image below the first image, than you need to change your DOM, as CSS cannot select the previous element, but it can select adjacent image, what you are using is .one:hover .two which will select an element having class .two nested under element having class .one on hover but since the elements are adjacent, you can use the selector below, but note that you need to change the element order in the DOM.
.one:hover + .two {
opacity: 1;
}
Demo
I assume Above means on hover you want to swap the image, so if that's what you want than use CSS Positioning techniques by setting your images to position: absolute; which are nested under position: relative; container.
Demo
div {
position: relative;
}
div img { /* Setting images to absolute */
position: absolute;
top: 0;
}
div img:nth-of-type(2) { /* Initially hiding image 2 */
opacity: 0;
}
div:hover img:nth-of-type(1) { /* On hover of div we hide 1st image */
opacity: 0;
}
div:hover img:nth-of-type(2) { /* On hover of div we show 2nd image */
opacity: 1;
}
You can also add transition property to smoothly swap the image on hover
Demo
div img {
position: absolute;
top: 0;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
Try using position:absolute and wrap your images with a div
div.images{
border:solid green 4px;
height:120px;
width:120px;;
margin-top: 50px;
position:relative;
}
.images img{
position:absolute;
top:0;
left:0
}
.two {
opacity:0;
z-index:1;
}
.images:hover .two {
opacity: 10;
}
DEMO
if it does not matter which one of your images come first you can change your html like this :
<img class="one" src="img/1.png" alt="me">
<img class="two" src="img/2.png" alt="bulb">
and use this CSS:
img.one:hover + img.two {
opacity: 1;
}
because there is no backward in CSS.
I have a few pictures in a table that they work as a link and in hover a play button should appear over them.
I tried many different tricks but they all have problems which dont work properly. I decieded to share my question here to find an standard solution.
Here is what I have done so far:
img{
position: relative;
}
img:hover:before {
background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
content:"";
width: 100%;
min-height: 100px;
position: absolute;
left: 0;
}
I dont know if I am in the right direction or not, but have a look at the demo http://jsfiddle.net/jmXdh/8/ and if it is wrong then please let me know any other way.
You unfortunately can't use the ::before and ::after pseudo-elements with replaced elements. The content of all replaced elements is outside the scope of CSS.
From the Generated and Replaced Content Module (WD):
Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.
Here's something that might work, assuming you can add additional markup:
http://jsfiddle.net/isherwood/jmXdh/11/
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a:hover .play {
background:url(http://placehold.it/80x80) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 80px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -50px;
}
<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
<b>Video test</b>
</a>
Or with a transition effect:
http://jsfiddle.net/isherwood/jmXdh/12/
.play {
opacity: 0;
transition: opacity 0.3s;
}
a:hover .play {
opacity: 0.7;
}