I have frame styles for the image:
.frame {
background:#efefef;
border:1px solid #f6f6f6;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); /* #todo Old Browsers Fix */
margin-bottom:15px;
padding:4px;
}
in one place of the project I work on, I have following HTML code:
<a href="#" class="preview">
<img class="frame" src="http://placehold.it/288x159" alt="" />
</a>
Basically, I want to change file opacity on mouseover and add a background (preview icon) to the link. I have following code:
.preview img.frame {
margin:0;
position:relative;
}
.preview:hover {
background:url('../img/icon_zoom.png') center center no-repeat;
display:inline-block;
z-index:40;
}
.preview img { /* #todo Add different browsers rules */
opacity: 1;
/*moz-transition-property:opacity;
-moz-transition-timing-function:ease-out;
-moz-transition-duration:500ms;*/
-moz-transition:opacity 1s ease-in-out;
}
.preview:hover img {
opacity:.5;
-moz-transition:opacity 1s ease-in-out;
/*-moz-transition-property:opacity;
-moz-transition-duration:500ms;
-moz-transition-timing-function:ease-out;*/
display:block;
position:relative;
z-index:-1;
}
However I faced few issues:
- how can I show background only for image body (currently it's also being displayed on the border)?
- why opacity is not being changed in Chrome?
jsFiddle added. As you may see, it works in FF, but not in Chrome.
The problem appears to be that you're changing the display to inline-block. Take it out, it should have the same functionality and work just fine.
Changing a couple other things seems to have it working as you intended. http://jsfiddle.net/minitech/v2vtw/2/
Related
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>
In the code below, there is an opacity transition which allows one image to fade out and reveal the one behind it. Overlaying both of these images is a logo image which is intended to remain in full view the full time of the transition, yet it does flicker out as the transition plays. (tested on chrome and firefox - seen on both)
How can i keep the logo constantly on top and in full opacity, while still having the underlying image fade work?
Please see the jsfiddle link at the bottom for a working example.
The HTML
<div>
<img id="bloomtop"
src="http://dev.kaizenauto.co/images/colorbloom.jpg">
<img id="bloombottom"
src="http://dev.kaizenauto.co/images/greybloom.jpg">
<img class="img-responsive z99"
src="http://dev.kaizenauto.co/images/drivenow.png">
</div>
The CSS
.z99 {
z-index:99;
}
#bloomtop,
#bloombottom {
width:100%;
height:290px;
margin-bottom:-290px;
display:block;
transition: opacity .7s ease-in-out;
z-index:1;
}
#bloombottom:hover {
opacity:0;
}
All this in action in a fiddle: http://jsfiddle.net/ax3dwbyo/2/
Thanks.
Simply add position: relative to your .z99 div, like this:
.z99 {
position: relative;
}
Here's a working demo:
.z99 {
z-index:99;
position:relative;
}
#bloomtop,
#bloombottom {
width:100%;
height:290px;
margin-bottom:-290px;
display:block;
transition: opacity .7s ease-in-out;
z-index:1;
}
#bloombottom:hover {
opacity:0;
}
<div>
<img src="http://dev.kaizenauto.co/images/colorbloom.jpg" id="bloomtop">
<img src="http://dev.kaizenauto.co/images/greybloom.jpg" id="bloombottom">
<img src="http://dev.kaizenauto.co/images/drivenow.png" class="img-responsive z99">
</div>
jsFiddle.
I have a large div with a small image inside of it. I want to make the image fade when I hover over the div, even when the mouse isn't directly over the image itself.
The div is much bigger than the image, so I'm not going to add transparency around the image or change the image size or anything like that.
I just want it to fade when the mouse hovers over the div it's in.
Here's the code I have so far, but it won't be useful:
<div id="left">
<img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" />
</div>
CSS
#left {
background-color: #f0f0ee;
float: left;
width: 50%;
min-height: 100%;
}
#logoLeft {
float: right;
margin-top: 2.5em;
}
I'd suggest:
#left:hover #logoLeft {
opacity: 0.4;
}
If you'd like a gradual fading:
#logoLeft {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
#left:hover #logoLeft {
opacity: 0.4;
transition: opacity 0.3s ease-in-out;
}
The below code would work if image.jpg is the regular image and faded.jpg contains a faded version of image.jpg that you photoshop.
<img src='image.jpg' onmouseover="this.src='faded.jpg';" onmouseout="this.src='image.jpg';">
You can do this one of two ways.
Use the general child selector: #left:hover #logoLeft which just says anything that is a child of #left:hover with an id of #left should have these rules applied.
User the direct descendant selector #left:hover > #logoLeft which says that any immediate child of #left:hover with id #left should have these rules applied.
Here is a more detailed description from Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
Also, the :hover sudo selector is what you would use for the mouse over property. MDN article: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
NOTE: Some older (outdated) versions of Internet Explorer only support the :hover sudo selector on anchor tags.
For the fading I'm guessing you just want to change the opacity of the image. To have full cross browser support I would recommend this page: http://css-tricks.com/snippets/css/cross-browser-opacity/
Which says the following:
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
Here is a working jsfiddle
Here is the Jquery Solution of this :
Css Part :
#left{
background-color: #f0f0ee;
float: left;
border:1px solid black;
width: 50%;
min-height: 100%;
}
#logoLeft {
float:right;
}
.fadeOut{
opacity:0;
transition: opacity 1s ease-in-out;
}
Js Part :
<script type="text/javascript">
$(document).ready(function(){
$("#left").on({
"mouseover" : function() {
$("#logoLeft").addClass("fadeOut");
},
"mouseout" : function() {
$("#logoLeft").removeClass("fadeOut");
}
});
});
</script>
HtML part:
<div id="left">
<img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" />
</div>
Here is the working example : http://jsbin.com/tijobudo/1/edit
I have developed an CSS and HTML code to create some kind of accordion multi-banner. I'm not using javascript at all.
Every thing works fine,except for I issue I can not resolve:
Start point is the first image "expanded"
If you hover over some other image, the former hovered one srinks,and the current also expand. Remainig ones accomodate their witdh
PROBLEM: if you hover fast from left to rigth to the last image you come to a point where you can over a greyed on (wrapper background) and all iamges remain then collapsed.
A must should be that,always, no matter what, there's at least one image expanded to show let's say an ad,product to choose...
How can I resolve that? The reason I'm not using width:auto is that it currently doesn't make any transitions with that value set.
CODE at http://jsfiddle.net/7NR4Y/
<style type="text/css">
#wrapper div.sector {
width:50px;
height:250px;
background-position:top center;
background-repeat:no-repeat;
float:left;
max-width:300px;
opacity:0.5;
overflow:hidden;
-webkit-transition:all 1s ease-out; /* Chrome y Safari */
-o-transition:all 1s ease-out; /* Opera */
-moz-transition:all 1s ease-out; /* Mozilla Firefox */
-ms-transition:all 1s ease-out; /* Internet Explorer */
transition:all 1s ease-out; /* W3C */
}
#wrapper #first{
width:300px;
max-width:300px;
min-width:50px;
opacity:1;
}
#wrapper:hover div.sector{
width:50px;
max-width:100%;
opacity:0.5;
}
#wrapper:hover #first{
width:50px;
max-width:100%;
}
#wrapper div.sector:hover{
width:300px !important;
opacity:1;
}
</style>
<body>
<div id="wrapper" style="width:500px; height:250px; background-color:#CCC; overflow:hidden; position:relative;">
<div id="first" class="sector" title="Imagen 1"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTpTF_3Pjjnsum_miN1hicvsPb-44qUm4Qban2_MfzEHevwK0_" /></div>
<div class="sector" title="Imagen 2"><img src="http://1.bp.blogspot.com/-dazqpbQnahc/UaxhFz6mwgI/AAAAAAAAGJQ/pVhtFcqEBiY/s640/Ideal-landscape.jpg" /></div>
<div class="sector" title="Imagen 3"><img src="http://2.bp.blogspot.com/-XegWV6RbUmg/UKIA7m7XgDI/AAAAAAAAAtA/6yQKXMkTjmA/s640/village-vector-the-dock-pixels-tagged-beach-landscape-512305.jpg" /></div>
<div class="sector" title="Imagen 4"><img src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" /></div>
<div class="sector" title="Imagen 5"><img src="http://c.dryicons.com/files/graphics_previews/sunset_landscape.jpg" /></div>
</div>
I have added the following to your CSS
a:last-child div.sector {
position: relative;
overflow: visible !important;
}
a:last-child div.sector:after {
content: "";
position: absolute;
left: 100%;
top: 0px;
height: 100%;
width: 100px;
background-color: green;
}
This creates a pseudo element after the last div of your series.
This pseudo will receive the hover state and transmit it to the element. This, way, even if the cursor goes in the zone of the wrapper that gets exposed sometimes, it will still get it selected.
I have it green so that you can se what is happening, of course in production make it transparent.
fiddle
Disregard all the previous answer !
All you need is
a:last-child div.sector {
overflow: visible !important;
}
fiddle 2
What I want is perhaps too simple, and I'm a bit overwhelmed by the responses I find!
***I'd prefer a pure CSS/HTML solution as I don't use javascript.***
What I'm doing at the moment is to use the TITLE attribute within an anchor tag to display information about the link (see: http://www.helpdesk.net.au/index_safety_driver.html and mouseover some of the links).
What I'd like to do is to have something a bit more flexible and interesting for that content and so I'm looking at floating a DIV over a link on hover instead of TITLE (can I leave TITLE in in case the DIV isn't supported - as a failsafe?).
I like the concept at http://www.barelyfitz.com/screencast/html-training/css/positioning/ but would like to have the option of an image in the top left corner.
Here is my updated jsfiddle. Using general css classes which you can reuse and with fade effect and with mouse out delay.
The first two css classes are what you need in your code, rest is just for example.
http://jsfiddle.net/ctJ3d/8/
.popupBox {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.3s,opacity 0.3s linear;
transition: all 0.4s ease;
transition-delay: 1s;
}
.popupHoverElement:hover > .popupBox {
visibility:visible;
opacity:1;
transition: all 0.3s ease;
transition-delay: 0s;
}
#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
}
<div id="button" class="popupHoverElement">
<h3>hover</h3>
<div id="two" class="popupBox">Hovered content</div>
</div>
I tried to achieve whatever I understood from your question. Check the fiddle here: http://jsfiddle.net/rakesh_vadnal/RKxZj/1/
HTML:
<div id="button"><h3>button</h3>
<div id="two">Hovered content</div>
</div>
CSS:
#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
width:98px;
height: 0;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#button:hover > #two {
display:block;
left:0px;
height:100px;
}
There is a tutorial called Sexy Tooltips with Just CSS that might be exactly what you're looking for. There are two things to watch for:
This solution requires that your tooltip be in your HTML markup, instead of reading from the title attribute directly. In a semantic approach to HTML, this strikes me as the wrong approach. Using CSS3, it's possible to utilize the title attribute as the value of the content property for a psuedo-element. However, without using Javascript to cancel the default tooltip, both tooltips will appear (see this demo jsfiddle). A much lengthier discussion of this technique, its implementation and issues, can be found at CSS3 Only Tooltips and Stack Overflow: How to change the style of Title attribute inside the anchor tag?
If you are still providing support for older browsers, be aware the IE7 will not obey the :hover selector for anything but A tags. If you need the tooltips to appear in IE7 for any element but an A tag, you'll need to use Javascript to add/remove a class from the element on hover and style using that class.
<div id="one"><h3>hover over me</h3>
<div id="two">Hovered content</div>
</div>
#one {
background:#443322;
position:relative;
width:100px;
height:30px;
display:block;
color:#FFFFFF;
}
#two {
background:#223344;
position:absolute;
width:100px;
height:100px;
display:none;
color:#FFFFFF;
}
#one:hover #two {
display:block;
left:100px;
}