Heres where I'm at:
http://codepen.io/qdarkness/pen/FyIJh
Ideally, how I imagine it at least, is when a user hovers over the <a> that the <div>'s "img-holder" and "tag" both have a transition to color, with the "img-holder" showing a "+" in the middle.
I'm suspecting the fact that I have the <img> inside the <div> that it is not working properly, but I am using that div to constrain the img width and height.
I'd prefer not to add additional divs, is this possible by just apply a class, like i attempted to, to the <div>?
HTML:
<li class="b c d">
<a href="" class="link">
<div class="img-holder overlay"><img src="img/test.jpg"></div>
<div class="tag overlay">
<h3>test</h3>
<h4>test</h4>
</div>
</a>
</li>
CSS:
.img-holder {
width: 235px;
height: 195px;
overflow: hidden;
}
.tag {
clear:both;
position:relative;
float:left;
width: 100%;
overflow:hidden;
background-color: #FFF;
text-align: center;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
a:hover .overlay {
background: #909090;
z-index: 301;
}
OK, I THINK I have an understanding of what you want to do...
I've forked your Codepen sketch: http://cdpn.io/uzfrk
Main points are to position the overlay absolute over your image (relative to .link), and then transition opacity to have it appear.
<old example removed>
UPDATED: fresh sketch with cleaned up markup and styling. Simple example for your purposes.
Codepen sketch here: http://cdpn.io/zhBcA
The main point is the direct child selector to target elements related to your container.
figure:hover > figcaption {
background: #ccc;
}
figure:hover > .overlay {
opacity: 0.85;
}
Let me know if this is what you are looking for.
Could this be what you want? It's just a simple approach.
UPDATE:
Covering text area now.
http://codepen.io/anon/pen/tlKCJ
Related
When I hover over my #icon div, an image appears. When I remove the mouse from #icon the image disappears.
THE PROBLEM
If I hover over the space where the image will appear if I hover over #icon, the image appears. I've tried anything, so I really hope you can help.
I need to remove all hover effects on my #image-divs
HTML
<div id="box">
<div id="icons1">
<div id="image1"></div>
</div>
<div id="icons2">
<div id="image2"></div>
</div>
<div id="icons3">
<div id="image3"></div>
</div>
<div id="icons4">
<div id="image4"></div>
</div>
</div>
CSS EXAMPLE
#box #icons1 #billede1 {
height: 450px;
width: 1000px;
margin-left: -186%;
margin-top: 150px;
background-image: url(../html_css/billeder/1.jpeg);
background-position: center;
background-size: cover;
opacity: 0.0;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
}
Use pointer-events:none
div{pointer-events:none}
div:hover{color:red;}
<div>Hover over me</div>
best way is to use pointer-events:none;
#image-divs{
pointer-events:none;
}
Notice that you to specify every hover for every div while you are using id's, you need to specify the hover effect for every div, now you should use this :
#image1{
display:none;
}
#icons1:hover #image1
display:block;
}
this means, whenever you hover the icon1, image1 will be displayed, and so.
you can also try the opactiy:0; and opacity:1;
hi i want to make a effect like this to my div on a hover:
website with the effect, hover over the people div's to see
I have tried to make a grid but I am strugling to get the hover effect on top of the div.
my codepen link, need the hover on the blocks
You'll need a container div and at least one foreground div to cover the background (could be just an image). Then you'll want to target the parent on hover and change the foreground child. I used transform instead of animating a position property because it's more performant.
.card{
position:relative;
width:200px;
height:200px;
border:1px solid blue;
overflow:hidden;
}
.card > div{
height:100%;
width:100%;
}
.card .foreground{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transform:translateX(100%);
background-color:blue;
transition:.5s ease;
}
.card:hover .foreground{
transform:translateX(0);
}
<div class="card">
<div class="foreground"></div>
<div class="background"></div>
</div>
You can attach styles to a div by using the :hover keyword.
Example, you want to change some effect on the div on hover:
div:hover {
background-color: black;
}
You want to change some effect on a child, on parent hover
div:hover .child {
background-color: black;
}
EDIT
Ok, check the class changes when you force hover on their page, their original element has these styles:
z-index: 200;
content: "";
height: 263px;
width: 102px;
background-color: #91c6c2;
display: inline-block;
position: absolute;
top: 0px;
right: -50px;
-webkit-transform: skew(21deg);
transform: skew(21deg);
-webkit-backface-visibility: hidden;
-webkit-transition: right 0.5s;
transition: right 0.5s;
On hover, they just change the elements "right", to 80px, which makes it float in via the mentioned transition, "transition: right 0.5s".
you require a overlay effect on hover of a div.
Please refer this link
<div id="overlay">
<span id="plus">+</span>
</div>
CSS
#overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}
#box:hover #overlay {
opacity:1;}
#plus { font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:96px;}
Found this in google search and also lots of plugins are avila
This may not be the most efficient way but it was most definitely the easiest that I've found. You can add the absolute position to the hidden div to make it on top of the image if you so choose!
HTML:
<div id='backgroundImg' onmouseover="hoverOver('show');" onmouseout="hoverOver('hide');">
<div id='hiddenDiv'>
</div>
<img src='myImage.png'>
</div>
Javascript:
<style>
function hoverOver(type) {
if (type=='show') {
document.getElementById('hiddenDiv').style.display='inherit';
} else {
document.getElementById('hiddenDiv').style.display='none';
}
}
</style>
I am trying to create an event with just CSS that will have a DIV (which is coloured white) turn from 0.6 opacity to 1.0 opacity when I hover over a separate div, so much so that when I hover over one div the other looks as if it is faded out.
My code can work if I wanted the div I hover over to fade but I want to hover and change the other div not the one I am hovering over.
HTML
<div id="sell1">
<div class="s1"></div>
</div>
<div id="gap"></div>
<div id="sell2">
<div class="s2"></div>
</div>
CSS
#sell1 {
height:100px;
width:100%;
background-color: rgb(50,70,130);
}
#sell2 {
height:100px;
width:100%;
background-color: rgb(50,70,130);
}
#gap {
height:50px;
background-color:white;
}
.s1, .s2 {
width:100%;
height:247px;
position:absolute;
background:rgba(255, 255, 255, 0.6);
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
#sell2:hover .s1 {
opacity:1;
}
http://jsfiddle.net/UgsyL/186/
So here I want to hover over the "sell2" div and have .s1 turn from 0.6 to 1.0 opacity.
Any help?
With your current setup of HTML, that's impossible. However, as LinkinTED pointed out, it's possible to hover #sell1 and make .s1 fade, by styling #sell1:hover ~ #sell2 .s2 { ... }.
If you need only to hover #sell2 and change .s1, you can switch their places in the HTML, making it:
<div id="sell2">
<div class="s2"></div>
</div>
<div id="gap"></div>
<div id="sell1">
<div class="s1"></div>
</div>
And then style the divs with relative and absolute positioning to be switched, as well as styling the hover with the code provided by LinkinTED.
This isn't THE answer to the question I asked originally but it is a work around I finally figured out that works for what I am wanting to do.
HTML
<ul>
<li><div></div></li>
<br/>
<li><div></div></li>
</ul>
CSS
div {
background-color: rgb(40,80,120);
height: 100px;
width: 200px;
}
ul li {
display: inline-block;
}
ul li div {
opacity: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
transition: opacity .5s;
}
ul:hover li div {
opacity: .5;
}
ul:hover li div:hover {
opacity: 1;
}
http://jsfiddle.net/xbMtN/7/
How would I go about hovering over an image that then blurs the background image behind it within css? The way I have it set up now is the background image blurs upon hover.
Here's my css:
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur img:hover {
-webkit-filter: blur(5px);
}
.wrapper{
width:900x;
height: 100px;
position: absolute;
top: 2400px;
z-index: 50;
}
.logo{
postion: absolute;
margin: 0 auto;
top: 2420px;
z-index: 50;
left: 400px;
}
html:
<div class="blur"><img src="/homepic1.jpg"></div>//This is the image I want blurred
<div class="wrapper">
<div class="row">
<div class="span12 pagination-centered">
<img src="/transparanetsnu.png">//How do I hover over any of these images to trigger a blur on "homepic1.jpg"
</div>
<div class="span4 offset3">
<div class="box2"><img src="/greek_logo.gif"></div>
</div>
<div class="logo"><img src="/UM-Main-Logo-Maroon.gif">
</div>
I think the best way is to use JQuery. All images and add a class like 'blur' to them everytime user hover over one image, but you should remove the class from the one you don't want.
$('.img1').mouseover(function(){
$('img').addClass('blur');
$('.img1').removeClass('blur');
});
Add the effect using css or javascript.
Use jQuery for that purpose.
First of all dowload jQuery from: http://code.jquery.com/jquery-1.10.2.min.js
Then.
$('.yourImage').mouseover(function(){ //'.yourImage' are the last three images in your case.
$('.homepic1').addClass('blur'); //'.homepic1' is the class of first image in your case
});
.addClass('blur') , Will add the class 'blur' from your CSS to that '.homepic1' element, As soon as your mouse hovers over ANY of the three images.
i am having a problem with the on :hover the tooltip is supposed to visible, but it does not happening .I am using only CSS no js included.Need help.
Thank you in advance...:)
here is my css :
.tooltip{
position: relative;
opacity: 0;
padding: 10px;
background: #9B59B6;
border-radius: 5px;
-webkit-transition:all 0.2s ease-in;
-moz-transition:all 0.2s ease-in;
transition:all 0.2s ease-in;
}
HTML :
<div class="wrapper">
<span class="tooltip">Hello ! This is tooltip....</span>
Hover Me !
</div>
You need some code to actually trigger the animation.
In my example below, I have nested the <span> inside the <a> in order to use :hover.
<div class="wrapper">
<a href="#" class="show">
Hover Me !
<span class="tooltip">Hello ! This is tooltip....</span>
</a>
</div>
a:hover span {
opacity:1;
}
http://jsfiddle.net/6RV5n/
EDIT:
Here's the same concept but using a CSS adjacent sibling selector so as not to nest the elements:
<div class="wrapper">
Hover Me !
<span class="tooltip">Hello ! This is tooltip....</span>
</div>
a.show:hover + span.tooltip {
opacity:1;
}
http://jsfiddle.net/7pT8Y/3/
Keep in mind that CSS sibling selectors may not work in older version of IE.
If you need to display the tooltip while the user hovering on the div wrapper..
Use the following CSS.
.wrapper:hover > .tooltip{
opacity: 1;
}
Check this... http://jsfiddle.net/TsQB5/
[EDITED]
.tooltip{
display:none;
}
.show:hover > .tooltip{
display: block;
}
This can solve the problem..