I am pretty new to coding...
<div class="box">
Click Here
<div class="slide"></div>
</div>
Here is my code. I am trying to get "slide" to start a transition when I hover over the entire"box". As it is now I have to hover over the actual div.
Here it is in jsfiddle. I've been using LESS, can you not use it in jsfiddle?
http://jsfiddle.net/nntTn/
Any help is appreciated. Thanks!
Working Fiddle http://jsfiddle.net/nntTn/2/
You just had the wrong selector is all for this
So I changed this
.box .slide:hover {
left: 262px;
}
to this
.box:hover .slide {
left: 262px;
}
and it works great now.
On line 32 of your fiddle, change to:
.box:hover .slide {
Related
I use below mention code to produce a CSS transition effect.
A div shows first image (i.e. 1.jpg), and upon mouse-hover the second image (2.jpg) is appear through CSS transition and when mouse-out the first image is back to display.
I need a third image on mouse-out so kindly help me how i do this through CSS.
My coding is as under:
.mainimg
{
background-image:url(1.jpg);
height: 300px;
width: 300px;
transition: 1s;
}
.img2
{
background-image:url(2.jpg);
background-size:500px 500px;
width:0px;
height:300px;
transition:1s
}
.mainimg:hover .img2
{
width:300px;
transition:1s;
}
<div class="mainimg">
<div class="img2"></div>
</div>
Try this out: use the same div for containing image
<div class="mainimg">
and use css hover to change image background
.mainimg {
background-image:url(1.jpg);
height: 300px;
width: 300px;
transition: 1s;
}
.mainimg:hover {
background-image:url(2.jpg);
transition: 1s;
}
The rollover is state is binary in CSS, an element is either being hovered over or it is not. You will need to use JavaScript for doing what you want.
what #Franz Thüs says is correct you have to use Javascript for the 3e image.
also what #Med7at is saying try using one div and change the image via the :hover
this should work for you.
I used an id instead of an class so only one item will change with those images.
i used colors so you can see the differents.
var mouseOut = document.getElementById("mainimg");
mouseOut.onmouseout = function() {
this.style.backgroundColor = "orange"; //this.style.background = "url(3.jpg)"
}
#mainimg{
background:blue; /*background-image:url(1.jpg);*/
height: 300px;
width: 300px;
transition: 1s;
}
#mainimg:hover{
background:red; /*background-image:url(2.jpg);*/
background-size:500px 500px; /* this will make the 3 img look missplaced for 1 second.
}
<div id="mainimg"></div>
see the comments what you should put in that line to make it work with the images.
I want to hover over a text and display an image then. This works so far, but to be honest the "hitbox" is too small. The image is just getting shown when I actually hover over the text. I would be cool if one could make that hitbox taller. Is there any possible solution for this problem?
$(document).ready(function () {
$('span').hover(function(){
$(this).addClass('under_line');
$(this).prev().show();
},function(){
$(this).removeClass('under_line');
$(this).prev().hide();
});
});
.is_hidden{
display: none;
position: absolute;
}
.under_line{
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="is_hidden" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" style="z-index:9" width="200px"/>
<span><b>Lorem Ipsum</b></span>
I would love to have it like on this site. Have a look at these tables and then hover over an element like for example like Execute:
It feels so smooth and nice. I already looked with the developer tool into the css of this but couldn't find anything that helps me..
If I understand what you are trying to do correctly, you could try adding some padding and negative margin to your CSS like so:
span {
padding: 30px;
margin: -30px;
}
This will make the element 30px larger on each side, but the negative margin will allow the surrounding text to not be pushed away by the same 30px amount.
There are many ways and it is actually hard to tell what is the best solution without knowing the context, so heres a basic proposal:
span {
display: block;
padding: 10px;
}
You should ofcourse not style the span element in general, but this fits to your example. Better would be to wrap your text in an element and set the style there.
The padding will increase the "hitbox" / size of your element.
Better Solution:
js
$(document).ready(function () {
$('.hovering').hover(function(){
$(this).addClass('under_line');
$(this).prev().show();
},function(){
$(this).removeClass('under_line');
$(this).prev().hide();
});
});
css
.hovering {
padding: 10px;
}
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="is_hidden" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" style="z-index:9" width="200px"/>
<p class="hovering"><b>Lorem Ipsum</b></p>
You could achieve this using pure css. Put the image and text in a div and detect when the div is hovered over, then hide/show the image using the :hover selector.
HTML
<div id="hoverhere">
<img src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg"/>
<p>
<b>Lorem Ipsum</b>
</p>
</div>
CSS
img{
width: 200px;
display: none;
position: absolute;
right: -200px;
top: -100px;
}
#hoverhere{
position: relative;
width: 100px;
margin-top: 100px;
}
#hoverhere:hover img{
display: block;
}
#hoverhere:hover p{
text-decoration: underline;
}
Fiddle
http://jsfiddle.net/L7L1bep6/1/
I updated my answer to mimic the site you linked more closely.
I have created popup play youtube videos using html,css and jquery.
Now i need to show, play button when hover an image.
Here is my code tried,
http://jsfiddle.net/495vbwy2/
May i know, how to do?
Html:
<div class="videoThum"> <a href="javascript:;" rel="http://www.youtube.com/embed/GNb8T5NBdQg?list=PL6B08BAA57B5C7810" class="youTubeVideo" ><img src="slide-2.jpg"/></a></div>
</div>
When i worked out like this ,
.guideBox .videoThum a:hover{color:#000; opacity:1;}
It doesn't work. May i know, how to do this,
Can anyone please help me. Thanks in advance.
try this. change color and opacity according to need.
.youTubeVideo:hover {
opacity:0.5;
background-color:#ffffff;
background-image:url('image.png');
}
HTML
<div class="videoThum"></span></div>
CSS
.videoThum .youTubeVideo {
position: relative;
}
.videoThum .youTubeVideo .icon {
display:none;
position: absolute;
top: 50px; // Set icon position you want
left: 50px; // Set icon position you want
}
.videoThum .youTubeVideo:hover {
display: block;
}
I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?
HTML:
<div id="next">
<img src="images/next3.png" alt="next page">
</div>
CSS:
#next a:hover{background: url('images/next3.png') 0 -45px;}
EDIT:
HTML:
<div id="next">
</div>
CSS:
#next {
height:40px;
width:160px;
background-image:url('images/next3.png');
}
#next:hover{background-position: 100% 100%;}
I think you need to use background-position attribute to achieve this.
CSS
div
{
height:40px;
width:160px;
background-image:url('http://i.stack.imgur.com/OOGtn.png');
}
div:hover
{
background-position:100% 100%;
}
JS Fiddle Example
You can also look into CSS Sprites.
You need to use it as a background in the first place. The <img> is covering the background.
Get rid of the image HTML and just use some CSS like this
a {
display: inline-block;
height: 40px;
width: 160px;
background: transparent url(img.jpg) 0 0 no-repeat;
}
a:hover {
background-position: 0 40px;
}
In this case you will need to remove your <img> tag and consistently use the CSS background attribute for both cases. Also define your height and width width of your a tag with CSS too.
css:
.myim {
width:50;
height:50;
}
.mydiv {
float:right;
position:absolute;
-index:2;
}
.myim:hover {
width:50;
height:50;
position:absolute;
z-index:2;
filter:alpha(opacity=95);
filter:alpha(opacity=95) !important;
opacity: 0.98 !important;
-moz-opacity:11;
}
html:
<div class='mydiv'>
<img class='myim'>
</div>
I want that whenever the mouseover is done on the image it should have little bit of transparency.
All above coding works well in FF, but it's not working in IE at all.
Thanks in advance
Since I remember, IE doesn't identify hover for non-a tags.
hover can be applied only to anchot tags....
the better solution for your query is to use jquery. its very simple to learn and build good website.
for jquery video tutorials see this link http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/. if you are a newbee to jquery this video tutorial will be so useful..