I know this question has been asked a hundred times and I have read every last one of them.
I have an image that is also a link. When the image is hovered it shows a new image and I have a small paragraph description I would like to pop up next to the image when the link is hovered over as well. Simple, right?
What i'm doing makes sense to me, and is the answer to this question. What am I doing wrong? This seems very straightforward.
How to show text on image when hovering?
I will paste my relevant code. Comparing to the posted link answer, I have the class project1 instead of imgWrapper and novelDescrip instead of imgDescription
HTML
<div class="project1">
<img id="novel" src="img/newnovel.png" onmouseover="this.src='img/newnovelblue.png'" onmouseout="this.src='img/newnovel.png'" />
<p class="novelDescrip" >A website for a local musician to market, stream, and distribute music and merchandise.</p>
</div>
CSS
.project1 p {
width: 25%;
margin: 20px 15px 0 0;
float: right;
}
.novelDescrip {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility opacity 0.2s;
}
.project1:hover .novelDescrip {
visibility: visible;
opacity: 1;
}
EDIT
Here is my problem now, the text hides and reveals but the hover is activated anytime my mouse is hovering in the area enclosed by the rectangle I drew on this image. Any ideas on why this is happening?
You don't need the the positions. top:0;left: 0; with absolute positioned div will always show up on top left corner of the browser. also added display:inline for the novelDescrip for the div to show-up next to the image.
.project1 p {
width: 25%;
margin: 20px 15px 0 0;
float: right;
}
.novelDescrip {
position: absolute;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility opacity 0.2s;
display:inline;
}
.project1:hover .novelDescrip {
visibility: visible;
opacity: 1;
}
Hope this is what you are looking for.
My be this will solve your problem
img {
height:30%;
width:30%;
}
.project1 p
{
width: 65%;
float: right;
display:none;
margin-left:5px;
}
.project1:hover .novelDescrip
{
display:block;
}
Live Demo
Related
A user hovers over glyphicon-globe image and behind it lies a like button and a comment form. When a user goes to click on the button or the comment form nothing happens. How can I make clickable what lies behind the globe?
view
<div class="image-container">
<span class="glyphicon glyphicon-globe" style="font-size: 7em; color: white; text-align: center; width: 100%; background-color: #446CB3; border-radius: 4px; padding: 19%;" id="image-foreground"></span>
<div class="text-wrapper">
<div class="like-button">
<%= link_to like_challenge_path(:id => #challenge.id), class: "btn", method: :post do %>
<span class='glyphicon glyphicon-thumbs-up'></span> Like
<% end %>
</div>
<div class="text-background">
<%= render "comments/form" %>
</div>
</div>
</div>
css
.image-container {
position: relative;
height: auto;
#image-foreground {
position: absolute;
z-index: 2;
opacity: 1;
&:hover {
opacity: 0;
}
}
}
.text-wrapper {
opacity: 1;
}
no hover
hover
There's two ways I'd try. So you know, giving an element opacity: 0; won't make it disappear completely. It is still there in position but not able to be seen. To have an element removed also use both opacity: 0; and visibility: hidden in your &:hover action.
The second way you could do it is stick with opacity: 0 but also set z-index: 0 (or any number below the z-index of the underlying layers. You have the hover working nicely but because it has a higher z-index than the underlying layers, it is still technically sitting on top of them and covering them, making them unclickable.
Hope that helps
Also a side note to the answer below, one of the answers here suggested using display: none in your hover action. display: none doesn't work for this as once an element is set to display: none, it is no longer there, not part of the DOM and so breaks the hover action.
you could do on hover display the blue screen as none.
.image-container:hover {
display: none;
}
it that what you wanted ?
Here was the trick that worked:
.hide-globe {
position: absolute;
width: 100%;
background-color: #ccac00;
padding: 100px;
}
.text-wrapper {
position: absolute; // This was essential
opacity: 0;
z-index: 1;
width: 100%;
&:hover {
opacity: 1;
background-color: white; // And this helped make the image seemingly go away
}
}
I want to change the position of my label when the checkbox is checked. This works fine if I don't transition the top offset property of my label. However, if I add a transition to this value (see the commented code), click on the label and don't move the cursor of my mouse the label seems that is still on hover state. That means, even though I don't hover on it, the cursor is a pointer and the background-color green (hover state of label).
If you see the demo, you'll understand what I mean.
My HTML code is the following:
<section>
<input type="checkbox" id="checkbox_id">
<label for="checkbox_id">Click me</label>
<div>
This is the first link
This is the second link
</div>
</section>
My CSS:
* {
margin: 0;
}
section {
position: relative;
padding: 20px;
background: yellow;
}
input[type="checkbox"] {
display: none;
}
label, a {
height: 30px;
padding: 10px 0;
margin: 10px;
}
label {
display: block;
background: tomato;
cursor: pointer;
width: 100%;
position: absolute;
top: 0;
/*transition: top .3s ease;*/
}
label:hover {
background: green;
}
input[type="checkbox"]:checked + label {
top: 100%;
}
a {
display: block;
background: tomato;
}
a:first-child {
margin-top: 50px;
}
Any idea why that's happening?
So, a little bit of jQuery might help us out here. Take a look at this jsFiddle.
CSS change:
.label--hovered { background: green; }
instead of:
label:hover { background: green; }
i.e. converted it to a class.
JavaScript:
$(document).ready(function(){
$('label').hover(function(){
$(this).removeAttr('style').addClass('label--hovered');
}, function(){
$(this).css('cursor', 'default').removeClass('label--hovered');
}).click(function(){
$(this).trigger('mouseleave');
});
});
Does this help?
You are using the syntax for the transition property but on transform. Additionally, transform doesn't take a top value. It takes scale, rotation, skew etc. You probably want this:
transition: top .3s ease;
Also don't forget to add vendor prefixes. (ie. webkit).
I'm very much a newbie, but I'm been trying to figure out how to get a hover effect for my thumbnails for the popular posts widget in Blogger.
I have relatively large thumbnails and I want to have the title of the post appear on hover.
Like this
Can anyone help me with this? I've been trying to find a solution online, but have so far found nothing.
Acutally the below can be simple achieved using display: block; and none but you won't be able to transit the element, hence, inorder to transit the element, we will hide it by using opacity: 0; and on hover we change it to 1, and you can make the background opaque using rgba() and the smoothness using transition. Also, don't forget to make the parent element position: relative; as it holds an absolute positioned child element.
I've made the below example from scratch, you can take a look...
Demo
div.wrap {
position: relative;
display: inline-block;
}
div.wrap img {
display: block;
}
.title {
opacity: 0;
background: rgba(255,255,255,.5);
padding: 5px;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
position: absolute;
top: 50%;
right: 0;
}
div.wrap:hover .title {
opacity: 1;
}
try this:
suppose you have Html Markup like this:
<div class="thumbnail">
Iam the main content
<div class="onhover">
i am onhover content
</div>
</div>
css:
.thumbnail{
width:200px;
height:100px;
background-color:Red;
}
.thumbnail:hover .onhover {
display: block;
}
see the demo
so basically, what you want is to affect another element(with certain selector), when some other element is hovered, basic syntax is :
sourceSelector:hover targetSelector{ /*whatever css you want to apply*/}
So this is my code and I was looking to use css3 transitions to fade in the text and background colour when you hover the image. I've tried numerous selectors and transition types but cant seem to get it right any help is greatly appreciated.
see demo below
http://jsfiddle.net/jiceb/xsFmA/
<a href="#">
<h2>Some Text</h2>
<img src="http://www.sheridanrogers.com.au/wp-content/uploads/2011/03/American-pancakes.jpg"/>
</a>
and css
a { position: relative; display: inline-block }
a img {
width:250px;
}
a h2 {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background: black;
color: #fff;
}
a:hover h2 {
display: block;
}
Rather than using display:none and display:block, simply use opacity and add a transition to your a h2 selector:
a h2 {
opacity:0; /* Completely invisible. */
transition:1s; /* A 1 second transition. */
}
a:hover h2 {
opacity:1; /* Completely visible. */
}
This will cause the opacity to increase from 0 to 1 over the period of 1 second.
JSFiddle demo.
I am trying to get a link when hovered to show an image just to the left of the link. I have achieved almost what I want minus I am having an html issue.
Trying to get my redtext class to show up on the backslash on the link that has the rollover effect.
Is there a way around this or better way of achieving this? The link in Question is yaya Photography
The CSS
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover span
visibility: visible;
top: -25px;
left: -125px;
}
And here is the html I am struggling to get to work
<a class="thumbnail" href="#accordion"><h3><span class="redtext">/</span> yaya Photography</h3><span><img src="images/yaya/yayathumb.png" /></span></a>
Thanks in advance!
Your problem is that your styles on span are affecting the class="redtext" span also.
A simple way to fix this: you can get rid of the span around your img, and then change the references to span in your CSS to reference img instead.