I have a span on an image which I hide using display:none. Trying to show it with display:block on hover is not working. Can any one help me?
.imagegood {
position: absolute;
top: 200px;
background-color: white;
color: black;
padding: 10px;
font-size: large;
display: none;
}
.ShowHidden:hover {
display: block !important;
}
<div style="position:relative; text-align:center;margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-6 col-md-6 col-lg-4 text-center ">
<a class="ShowHidden" href="#">
<div>
<img style="width:100% ; height:auto;" class="img-responsive center-block" src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg" />
<span class="imagegood">GoodTitle</span>
</div>
</a>
<h3 style="font-weight:bold;" class="h">GoodTitle</h3>
<h5 class="h">GoodSubText</h5>
</div>
Consider following
.ShowHidden:hover .imagegood{
display:block;
}
.imagegood{
position: absolute;
top: 100px;
background-color:white;
color:black;
padding:10px;
font-size:large;
transition: 1s all;
opacity: 0;
}
.ShowHidden:hover .imagegood{
opacity: 1;
}
<div style="position:relative; text-align:center;margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-6 col-md-6 col-lg-4 text-center ">
<a class="ShowHidden" href="#">
<div>
<img style="width:100% ; height:auto;" class="img-responsive center-block" src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg" />
<span class="imagegood">GoodTitle</span>
</div>
</a>
<h3 style="font-weight:bold;" class="h">GoodTitle</h3>
<h5 class="h">GoodSubText</h5>
Used to this
.ShowHidden:hover .imagegood{
display:inline-block ;
}
Demo
Code
.imagegood{
position: absolute;
top: 200px;
background-color:white;
color:black;
padding:10px;
font-size:large;
display:none;
}
.ShowHidden:hover .imagegood{
display:inline-block ;
}
<div style="position:relative; text-align:center;margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-6 col-md-6 col-lg-4 text-center ">
<a class="ShowHidden" href="#">
<div>
<img style="width:100% ; height:auto;" class="img-responsive center-block" src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg" />
<span class="imagegood">GoodTitle</span>
</div>
</a>
<h3 style="font-weight:bold;" class="h">GoodTitle</h3>
<h5 class="h">GoodSubText</h5>
</div>
Answer is already given but for your understanding :
If you want to hide and show any element then target that element too like you hide the span so on hove use span also like this .ShowHidden:hover span
If you are hiding div then use div instead of span or you can use class/id name also.
Working Demo
What I think you should try is visibility: hidden; vs display: none;
display: none; removes it from the page - you can still interact with it in the dev tools, but can't see it where as visibility: hidden has allocated dom space.
see this answer here
Why not use JQuery
$(".imagegood")..mouseover(function() {
$( ".center-block").fadeIn();
});
you can even have it popup for 3sec
$( ".center-block").fadeIn().delay(3000).fadeOut();
take a look at this link http://api.jquery.com/fadein/
Related
I have an image with a font awesome overlay of a plus. When I hover over the image (a tag) I want to display the plus, but I'm not sure if I have the correct css. The plus doesn't show when I hover over it!
Here is my code
a.registerTeacherAsHost:hover {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost:hover > .addTeacher {
display: normal;
}
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<div>
<img class="img-responsive" src="~/Images/User_small_compressed_blue.png" style="position: relative; left: 0; top: 0;" alt="no teacher">
<i style="display:none; z-index: 200; position: absolute; top: 35%; right: 42%; color: grey;" class="addTeacher fa fa-plus fa-2x"></i>
</div>
</div>
</a>
Your CSS should look like this
a.registerTeacherAsHost:hover {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost .addTeacher { display: none; }
a.registerTeacherAsHost:hover .addTeacher {
display: block;
}
And the HTML
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<div>
<img class="img-responsive" src="~/Images/User_small_compressed_blue.png" style="position: relative; left: 0; top: 0;" alt="no teacher">
<i style="z-index: 200; position: absolute; top: 35%; right: 42%; color: grey;" class="addTeacher fa fa-plus fa-2x">asd</i>
</div>
</div>
</a>
There were three problems with your code,
You were using the ">" selector which will only select the child element (.addTeacher) which is right after the parent element (.registerTeacherAsHost) which in you case doesn't work.
Other than that, the problem was with HTML where you declared the CSS for .addTeacher in the style tag, browsers take the CSS in this tag into consideration over any other stylesheets. One thing that could've worked was adding an !important to a.registerTeacherAsHost:hover .addTeacher { display: block !important; }. But it's better to write styles in a stylesheet and avoid using the !important as much as possible.
Next thing was, you were using display: normal which I've never heard of before and I think the browser hasn't too. display: block does the job.
Here's a fiddle: https://jsfiddle.net/5ncprd90/
Hope it helps!
There's been plenty wrong with your CSS which has been discussed already. I am focusing on a quick solution which goes here. Some adjustments have been made in the HTML structure and you are advised to avoid inline CSS. Hope this is what you are looking for.
a.registerTeacherAsHost{
display:inline-block;
}
a.registerTeacherAsHost:hover .thumbnail img {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost:hover i.addTeacher {
display: block;
cursor: pointer !important;
}
.thumbnail{
position:relative;
max-width:100%;
}
i.addTeacher{
display:none;
z-index: 200;
position: absolute;
top: 35%;
right: 42%;
color: grey;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<img class="img-responsive" src="https://www.shareicon.net/data/128x128/2015/09/24/106425_man_512x512.png" alt="no teacher">
<i class="addTeacher fa fa-plus fa-2x"></i>
</div>
</a>
I have several figure-elements where I want to add some simple hover-effect to the caption when hovering the parent-container. But that doesn work out, neither with > nor in the way shown below, what do I do wrong there?
.kategorie_container .product_caption{
margin:0;
width:100%;
position: absolute;
padding: 1vh 2vw;
bottom: 0;
background:white;
transition: 0.2s;
}
.kategorie_container figure:hover .kategorie_container .product_caption {
background:blue;
}
And this is the markup-structure of it:
<figure class="col col-3 ">
<a href="#">
<img src="assets/media/raster/active-pro80-dose_1.jpg" />
<div class="product_caption">
<h6 class="produktname">Productname</h6>
<h6 class="produktpreis">Productprice</h6>
</div>
</a>
</figure>
Thanks!
There is no element with the class "kategorie-container" inside your figure. I think you meant to write
.kategorie_container figure:hover .product_caption {
background:blue;
}
I have a 'ul' with dynamic data. Each list inside has an user image, and when you hover on the image, an info box will show up on the left side of the 'ul'.
When I set the 'ul' to be overflow-y:scroll, the part of the info box that's outside of the 'ul' will be cut.
Here's what it should look like. The blue area is the info box.
Here's what it looks like now: The blue area is cut.
Here's the css code:
.popUpRSVPList{
padding-left:0px;
overflow-y: scroll;
height: 70%;
position: relative;
}
.hoverToShowInfo{
position: relative;
}
.hoverToShowInfo .infoinfo {
display: none;
}
.hoverToShowInfo:hover .infoinfo {
position:absolute;
left:-280px;
top: -60px;
display:block;
z-index: 10;
top: 100%;
}
Here is the html code:
<ul class="popUpRSVPList" >
<li style="padding-left:20px;">
<a class="hoverToShowInfo" href="">
<!--Left Info Box, will show on hover-->
<div class="col-sm-12 infoinfo" >
</a>
</li>
</ul>
UPDATE:
The reason I set overflow-y:scroll; is that I need the ul to be scrollable and thus when there are hundreds of data, the 'ul' list will be shorter than the screen, and user can just scroll inside it to view each list.
Here is a jsfiddle link: https://jsfiddle.net/7gr7jvvh/
Please uncomment overflow-y:scroll. You will see the difference.
Take a look at given jsfiddle code hope you want this thing:
.popUpRSVPList li { background: white; list-style-type:none; padding:12px 15px; color: black;}
.popUpRSVPList li:nth-child(odd) { background: rgba(241,242,242,1); }
.popUpRSVPList{
padding-left:0px;
/* overflow-y: scroll;*/
height: 70%;
position: relative;
}
.hoverToShowInfo{
position: relative;
}
.hoverToShowInfo .infoinfo {
display: none;
}
.infoinfo div{
width:270px;
}
.hoverToShowInfo:hover .infoinfo {
position:absolute;
left:0px;
top: -60px;
display:block;
z-index: 10;
top: 100%;
height: 100px;
overflow-y: scroll;
}
span.rightNames {
color: white;
}
.infoBoxFirstLine{
background:rgba(49,66,84,1);
min-height:auto;
max-width:270px;
padding:12px 15px;
}
<ul class="popUpRSVPList" >
<li style="padding-left:20px;">
<a class="hoverToShowInfo" href="">
&User Name
<!--Left Info Box, will show on hover-->
<div class="col-sm-12 infoinfo" >
<div class="infoBoxFirstLine row " >
<!--attendee profile image w-->
<div class="leftImage" >
<img src="" style="border-radius:150px; width:50px; height:50px;"/>
<!--attendee name w-->
<span class="rightNames" style="">
NAME 1
</span>
</div>
<!--end-->
</div>
<div class="infoBoxFirstLine row " >
<!--attendee profile image w-->
<div class="leftImage" >
<img src="" style="border-radius:150px; width:50px; height:50px;"/>
<!--attendee name w-->
<span class="rightNames" style="">
NAME 1
</span>
</div>
<!--end-->
</div>
<div class="infoBoxFirstLine row " >
<!--attendee profile image w-->
<div class="leftImage" >
<img src="" style="border-radius:150px; width:50px; height:50px;"/>
<!--attendee name w-->
<span class="rightNames" style="">
NAME 1
</span>
</div>
<!--end-->
</div>
</div>
</a>
</li>
</ul>
I have this page http://myrender.altervista.org/show2.html
I moved the 5 buttons to the right corner with the float:right instruction and then the hover in those buttons stopped to work suddently (before the float:right it worked).
There is the HTML:
<div class="container">
<div class="imgcontainer">
<div class="latest">Ultimi Caricamenti</div>
<img class="imgslide" src="" />
</div>
<div class="buttondiv">
<div class="button" onclick="change(0); clearInterval(t);" id="p0"></div>
<div class="button" onclick="change(1); clearInterval(t);" id="p1"></div>
<div class="button" onclick="change(2); clearInterval(t);" id="p2"></div>
<div class="button" onclick="change(3); clearInterval(t);" id="p3"></div>
<div class="button" onclick="change(4); clearInterval(t);" id="p4"></div>
</div>
</div>
and there are the CSS classes (only the needed):
.button
{
display:inline-block;
height:10px;
width:10px;
background:#eee;
border-radius:50%;
cursor: pointer;
opacity: 0.6;
}
.button:hover
{
opacity:1.0;
}
.buttondiv
{
margin-top: -17px;
padding-right: 5px;
float:right;
}
.buttonactive
{
background:#1390cd;
opacity:0.8;
}
.container
{
width:592px;
height:183px;
}
Thanks in advance :D
Just add position: relative; to .buttondiv or to .button
I have the following code
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body,td,th {
color: #FFFFFF;
}
body {
background-color: #000000;
}
#Pictures {
position:absolute;
width:591px;
height:214px;
z-index:1;
left: 17%;
top: 30%;
text-align:center;
}
#Links {
width:600px;
height:30px;
z-index:2;
top: 184px;
font-family: "Broadway", Broadway, monospace;
font-size: 14px;
color: #FFFFFF;
text-align: center;
}
.links2 {
font-family: Broadway;
color: #FFFFFF;
text-decoration: none;
}
a:links2, a:visited {
color: #ffffff;
}
a:hover, a:active {
color: #333333;
}
#Main {
position:absolute;
width:800px;
height:600px;
z-index:2;
left: 15%;
top: 10%;
right: 15%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#Logo {
position:absolute;
float: left;
width:104px;
height:100px;
z-index:2;
}
</style>
</head>
<body>
<div id="Main">
<div id="Pictures">
<div>
<a href="1.html" ><img src="1.gif" alt="x" width="181" height="173" border="0" /></a>
1
</div>
<div>
<img src="2.gif" alt="x" width="181" height="173" border="0" align="top" />
2
</div>
<div>
<img src="3.gif" alt="3" width="181" height="173" border="0" />
3
</div>
</div>
</div>
<div id="Logo"><img src="logo.gif" alt="x" width="104" height="100" border="0"/></div>
</div>
</body>
</html>
Which is displaying the picture layers vertically.
I am trying to make it o the 3 images are aligned horizontally with the text centered underneath them. Why are they defaulting to vertical, and can I change this behavior?
You don't actually need that much code to achieve what your're after. For example:
<style>
body {
background-color: #000;
color: #FFF;
}
a {
font-family: "Broadway", Broadway, monospace;
font-size: 14px;
color: #FFF;
}
#images a {
width: 24.99%;
display: block;
float: left;
text-align: center;
}
</style>
<div id="images">
<a href="1.html" >
<img src="1.gif" alt="x" width="181" height="173" border="0" /><br />
One
</a>
<a href="2.html" >
<img src="2.gif" alt="x" width="181" height="173" border="0" /><br />
Two
</a>
<a href="3.html" >
<img src="3.gif" alt="x" width="181" height="173" border="0" /><br />
Three
</a>
<a href="4.html" >
<img src="4.gif" alt="x" width="181" height="173" border="0" /><br />
Four
</a>
</div>
The trick to get the items to align horizontally rather than vertically is to "float" the containers (left or right). By setting the links to display: block; you can use them as the containers instead of wrapping everything in extra <div>s. I have set the width to 25% (or 24.99% to avoid a rounding error in some browsers) so that they're spread out evenly across the page but you might want a different alignment which is easily done using margins/padding and/or a different width on the containers. Note also that when you set a text colour on the body {} you do not need to specify it again elsewhere apart from for links. Same thing goes for font-family, allthough this is also inherited by links. Good luck with the project!
Look at this code and test it: you can do the same thing in a more efficient, semantic and clean way:
Css:
div.imageBox {
float: left;
margin-right: 10px;
}
div.imageBox p {
text-align: center;
}
Html:
<div class="imageBox">
<a href="#">
<img src="image1.gif" width="100" height="100"
alt="image 1" /></a>
<p>1</p>
</div>
<div class="imageBox">
<a href="#">
<img src="image2.gif" width="100" height="100"
alt="image 1" /></a>
<p>2</p>
</div>
<div class="imageBox">
<a href="#">
<img src="image3.gif" width="100" height="100"
alt="image 1" /></a>
<p>3</p>
</div>
That's all you need!
If you want to keep your code, there are no reasons to use the attribute align inside the img tag. You can use span instead of div, but in this case is better to keep using div and give them a width:
div#Pictures div
{
float: left;
margin-right: 5px;
}
This code:
a:links2
has no sense. links2 is a class made by you, not a pseudo-class or a pseudo-element.
I think a display: block; on your links2 class should put the links under the images correctly.
Also, to get the images to line up horizontally, use <span>s instead of <div>s inside the 'Pictures' div, and float them left.
#Pictures span
{
float: left;
margin-right: 5px;
}