You can visit the site here (click "portfolio" to get to the relevant part for this question).
I am trying to set up a title to appear when an image is hovered over. I formatted the images as well as the text to appear upon hovering. I set the div's visibility to hidden and used the hover tag to make it visible, but it refuses to reappear upon hovering. How can I make the div actually appear upon hovering?
Here's my HTML (just the first li to keep the post short)
<li>
<a href="#openModal1">
<div class="imgwrap">
<img src="portfolio_images/poster.png">
<div class="textwrap"><p class="imgdes">Pedalfest Poster</p></div>
</div>
</a>
</li>
And the CSS
.imgwrap {
height:150px; width:150px;
}
.textwrap {
position:absolute;
width:150px; height:30px;
background-color:#727272;
margin-top:-30px;
visibility: hidden;
}
.imgdes {
text-align:center; font-family: Droid serif, serif;
font-weight:500; font-size:14px;
line-height:30px;
text-decoration:none; color:#f7f7f7;
top:50%;
}
.textwrap:hover {
visibility: visible;
}
Try changing the visibility when you hover over the container. You can do something like:
.imgwrap:hover .textwrap {
visibility: visible;
}
You are simply using the hovering over the imgwrap class to control the properties of textwrap. Essentially you are just using the hovering over the parent but then specifying a child; in this case, textwrap. Since you can't hover over an element that is hidden, we hover over it's parent, which is the area over which we want to be able to hover anyway.
Related
I tried to make a simple CSS hover but got a blinking image issue. Is there something I can do to fix that?
In the meantime, there is a empty gap between a H3 title and .term-image class because of my CSS settings for a class (.term-desc). Is there a way to eliminate this gap? It appears that the gap created by position:relative is not easy to be removed.
I need to hide the image when mouse hovers.
http://jsfiddle.net/fveqkcnj/
<div class="categorywrapper">
<div class="views-row views-row-1 views-row-odd views-row-first">
<h3 class="term-title">
Arts & Culture
</h3>
<div class="term-desc">
<p>This is Arts & Culture</p>
</div>
<div class="term-image"> <img src="http://placehold.it/235x150/ffffee" />
</div>
</div>
.categorywrapper {
width: 720px;
clear:both;
}
.categorywrapper .views-row {
float:left;
position:relative;
width:235px;
}
.categorywrapper .views-row h3 {
position:relative;
margin-left:30px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
width:80%;
min-height:38px;
}
.categorywrapper .views-row .term-desc {
position:relative;
top:100px;
left:20px;
width:200px;
}
.categorywrapper .views-row .term-image {
position:relative;
}
.categorywrapper .views-row .term-image:hover {
z-index:-2;
}
Add to your css: pointer-events:none; in the .categorywrapper .views-row .term-desc
Basically the result is:
.categorywrapper .views-row .term-desc {
pointer-events:none;
position:relative;
top:100px;
left:20px;
width:200px;
}
Additionally you use a negative z-index on your hover element which means it goes behind the parent elements and triggers the mouseout event which turns off the hover.
You can fix that by instead of applying the following css to the row instead of the image:
.categorywrapper .views-row:hover .term-desc {
z-index:2;
}
Here is the JSFiddle
If you want it over the image do the same but put the .term-desc element inside the tag.
I've never used z-index for image hovers, but I would imagine that if you move the z-index down, the browser no longer considers you to be hovering over the image, so you get the blinking effect you mention. Try producing your hover effect using an alternative background image instead. Or else by changing opacity.
I assume your intention is to show the text when hovering the image. If that is true, you've chosen not only a cumbersome approach, but also one that doesn't work.
Since your image is wrapped in a div already, it is extremely easy to achieve your goal: Just put the div with text that should appear inside the same container that has the image. Apply proper positioning and give it a default opacity: 0; so it's initially invisible.
Then
.categorywrapper .views-row .term-image:hover .term-desc {
opacity: 1;
}
To also get rid of the unwanted whitespace between your h3 and your image, just set the h3's margin-bottom: 0;
http://jsfiddle.net/fveqkcnj/5/
I have the following CSS:
.contact{
padding:1rem;
background:#023B6C;
padding:1rem;
position:fixed;
right:-20px;
top:27%;
z-index:99;
border-radius:5px 5px 0 0;
border:2px solid #fff;
transform:rotate(-90deg);
transition:all .5 ease;
}
.contact a{
font-size:1.2rem;
color:#fff;
transition:all .5 ease;
}
.contact a:hover{
color:#E5E5E5;
font-size:1.25rem;
}
.contact:hover{
padding:1.2rem;
}
that controls the following HTML:
<div class="contact">
Contact
</div>
What this is doing is upon hovering over the div the div slightly expands and the text also expands. However, if a person doesn't hover directly over the text the text doesn't change, just the div.
How do I modify the code so the link inside the divs changes when the div is hovered but the text is not? I tried putting all of the code inside the .contact:hover but that didn't work as the link was styled by the default styles of my css.
Here is a jsFiddle of my code.
Think about it from right to left...
Any, a - inside of .content that is on hover...
so
(from right to left)
.contact:hover a {
}
But, I would make the whole thing an anchor. make it block and style the whole thing on hover.
I have a menu with several div. Every div has a 1px left border. On hover, I change the background of the current div, but as you can see with the following JSFiddle, it's ugly that the previous (grey) border is still visible.
I would like to hide it when I'm on the current selected div. Any ideas?
Fiddle
<div id="main_menu">
<div class="menu_item"><div class="link">Example</div></div>
<div class="menu_item"><div class="link">Example</div></div>
<div class="menu_item"><div class="link">Example</div></div>
<div class="menu_item"><div class="link">Example</div></div>
</div>
To make it more clear, from this:
To this:
Possibly without using any JS.
Change your .menu_item hover css to this:
#main_menu .menu_item:hover {
background-color:#00437f;
cursor:pointer;
position:relative;
left:-1px;
}
and to maintain text at its position update below css:
#main_menu .menu_item:hover .link {
color:#fff;
border:0px;
position:relative;
left:1px;
}
One would tink that changing :hover of a parent element applies the transformation to each of the child elements. However,
<a href="" class="pressRelease"><div class="pressRelease">
<div class="timestamp">
<p class="timestamp">02 Feb 2012</p>
</div>
<div class="pressReleaseTitle">
<p class="pressReleasetitle">release title</p>
</div>
</div></a>
div.pressRelease :hover {
background-color:#F2F2F2
}
div.timestamp {
float:left;
width: 110px;
padding-top:10px;
padding-bottom:21px;
}
div.pressReleaseTitle {
float:right;
width:498px;
padding-top:23px;
padding-bottom:21px;
padding-left:25px;
}
a.pressRelease {
text-decoration:none;
color:#767676;
display:block;
background-color:#063
}
I have this code in the HTML and CSS files, and the behavior is pretty odd: when I hover over the timestamp, only timespamp background color is changed, while the color of press release title remains unchanged. Obviously, I want the whole press release to be highlighted
Any ideas on how to fix this?
Thanks in advance
Error:
Replace:
div.pressRelease :hover
With:
div.pressRelease:hover
There should not be any space before :hover.
Suggestions:
The way you have written your HTML is not valid. An inline element <a> cannot contain a block element <div>.
The browsers will ignore the surrounding <a> tag. So, if you give a code like:
<a><div><p></p></div></a>
It will be rendered as
<a></a><div><p></p></div>
Try giving float:left to parent div as it is not wrapping child elements with 'float'
in addition to the error fix mentioned by Praveen
div.pressRelease {
float: left;
}
Add oveflow:auto to a tag to wrap the inner elements.
And remove div from div.pressRelease:hover
.pressRelease:hover {
background-color:#F2F2F2
}
div.timestamp {
float:left;
width: 110px;
padding-top:10px;
padding-bottom:21px;
}
div.pressReleaseTitle {
float:right;
width:498px;
padding-top:23px;
padding-bottom:21px;
padding-left:25px;
}
a.pressRelease {
text-decoration:none;
color:#767676;
display:block;
background-color:#063; overflow:auto
}
DEMO
I have a simple CSS help popup that's been working well for me in most simple layouts. But now it needs to work inside a scrolling div.
Given the example HTML:
<div style="overflow:scroll; width:80px">
<a href="#" class="tooltip">
an image
<span>some hidden tooltip which is a bit longer in here</span>
</a>
</div>
(Note: in the real world there will be multiple things with tooltips inside the scrolling div)
I have the CSS:
a.tooltip span
{
display:none;
position:absolute;
padding:0px 0px 2px 2px;
background:yellow;
text-decoration:none;
vertical-align:top;
}
a.tooltip:hover span
{
display:inline;
position:absolute;
padding:0px 0px 2px 2px;
top:0;
left:18px;
background:yellow;
text-decoration:none;
vertical-align:top;
z-index:5;
}
a.tooltip
{
border-width:0px;
text-decoration:none;
}
a.tooltip:hover
{
border-width:0px;
text-decoration:none;
position:relative;
}
Is it possible to have the popup pop out of the scrolling div so it's readable without causing the div to scroll?
Is this achievable in CSS alone, without using javascript?
edit: Live Example kindly provided by Kyle Sevenoaks.
You can set the :hover on the entire DIV. and place your span directly in the div. (This solution does not work in IE6 for example).
see a working example here: http://jsfiddle.net/5mASU/1/
Or you could set i higher z-index to the tooltip and use position fixed, it works:
http://jsfiddle.net/5mASU/3/
also avoid resetting the same values in the hover here is a cleaned up version:
http://jsfiddle.net/5mASU/4/
if for example you set
a {
padding: 5px;
}
a:hover {
// no need to reset the padding here
}
you don't need to reset the padding in the :hover the hover heritages the padding form the style set for the a. Just reset values you want to change between the normal and the hover status.
I don't think it's possible, because z-indexes work from the parent, the child element won't be able to display the span over the top. This CSS tooltip just adds another element when the <a> is hovered. I think you might have to go the jQuery route.
Also, try to post live examples of your problem instead of a long list of HTML and CSS, it's easier for us to help you :)