I have some images that I use CSS to make a darker background.
This makes the images darken on hover. It can be seen at rtsb.co.uk on the main images.
However when viewing the images, the background is shown slightly behind the images, seen as a grey stripe under each image. the images are 600px height, but for some reason, the code for 'outerLink' makes it 607px height and so the bar appears, this can be seen using Chrome dev tools when viewing the page.
.outerLink {
background-color: #e8e8e8;
display: block;
opacity: 1;
filter: alpha(opacity=100);
}
img.darkableImage {
opacity: 1;
filter: alpha(opacity=100);
}
<a href="/collections/sale" class="outerLink">
<img src="//cdn.shopify.com/s/files/1/1234/4330/t/6/assets/promo_image_1.jpg?12217915569807539649" alt="Sale" class="darkableImage" onmouseout="this.style.opacity=1;" onmouseover="style.opacity=0.7;">
</a>
I've tried looking at everything to find where this added 7px comes from but I can't find it anywhere.
Even if I change the name of the CSS to .outerLinktest, the tag above still seems to pick up a height of 19px from somewhere.
I cannot add a height CSS attribute to .outerLink as the page is dynamic for mobiles etc and the images resize due to this so won't always be 600px high.
Have you tried to put
display:flex;
instead of
display:block;
in outerLink?
.outerLink {
background-color: #e8e8e8;
display: flex;
opacity: 1;
filter: alpha(opacity=100);
}
I've tried it with the inspector and it works.
Snippet:
.outerLink {
background-color: #e8e8e8;
display: flex;
opacity: 1;
filter: alpha(opacity=100);
}
img.darkableImage {
opacity: 1;
filter: alpha(opacity=100);
display: block;
}
<a href="/collections/sale" class="outerLink">
<img src="//cdn.shopify.com/s/files/1/1234/4330/t/6/assets/promo_image_1.jpg?12217915569807539649" alt="Sale" class="darkableImage" onmouseout="this.style.opacity=1;" onmouseover="style.opacity=0.7;">
</a>
also make the image display:block;
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
display:block; /*<----*/
}
or change outerlink background color into white maybe...
Use display:block; on img class.
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
display:block;
}
Snippet:
.outerLink
{
background-color:#e8e8e8;
display:block;
opacity:1;
filter:alpha(opacity=100);
}
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
display:block;
}
<a href="/collections/sale" class="outerLink">
<img src="//cdn.shopify.com/s/files/1/1234/4330/t/6/assets/promo_image_1.jpg?12217915569807539649" alt="Sale" class="darkableImage" onmouseout="this.style.opacity=1;" onmouseover="style.opacity=0.7;">
</a>
Check Fiddle
You may set position attributes to your classes :
.outerLink
{
background-color:#000;
display:block;
opacity:1;
filter:alpha(opacity=100);
position:absolute;
}
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
position: relative;
top:0;
left:0;
}
Related
I'm working on an overlay on top of a full-frame google docs iframe. I want the top section of the docs to be covered by an 100% width div which fades on hover, revealing the docs options which become clickable.
I've got the fade transition working but the invisible div blocks the iframe from been clicked. If I use pointer-events:none, change the z-index or display:none I get a nasty flickering effect when the cursor is moved.
Is there a work around?
https://github.com/plasticplant/miscresearch/tree/master/miscresearch
#background-site {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
#background-site iframe {
width: 100%;
height: 100%;
border: none;
overflow: scroll;
}
#header {
position: absolute;
width: 100%;
z-index: 30;
font-size: 55px;
font-family: 'Sporting_Grotesque-Bold';
padding: 5px;
text-align: center;
transition: 0.3s;
background: white;
}
#header:hover {
opacity: 0;
}
<div id="header">
miscresearch
</div>
<div id="background-site"><iframe name="backgrnd" id="backgrnd" scrolling="yes" src="https://docs.google.com/document/d/16_jikyP9LfNibSOvM4XPeuB2jhf8YEYES1p8xhTBBDM/edit?usp=sharing"></iframe></div>
Try this, should work -- i replicated your problem using some divs, but it gets the point across.
First, use the style "pointer-event:none;" to make the upper level div able to be selected through. The lower div has mouseover and mouseout events that call javascript to change the opacity of the overlay.
You can try applying the mouseover and mouseout functions to the div containing the iframe
function hidefunc(){
document.getElementById("test").style.opacity = '0';
}
function showfunc(){
document.getElementById("test").style.opacity ="1"
}
#test{
position:absolute;
top:0px;
width:300px;
height:300px;
background-color:#000000;
transition: opacity .5s;
pointer-events:none;
z-index:2;
}
#base{
position:absolute;
top:0;
z-index:0;
height:50px;
width:600px;
background-color:red;
}
<div id="test">
</div>
<div onmouseover="hidefunc()" onmouseout="showfunc()" id="base">
Link
</div>
Maybe using z-index is a better approach because when you do display:none; on :hover you are not hovering any element so the nasty effect happens.
#header:hover {
opacity: 0;
z-index: -1;
}
Iframes have a load event, which fire once they have loaded.
Simply create your overlay, and remove it once the iframe's onload event fires.
HTML:
<div id="background-site" class="showOverlay">
<iframe name="backgrnd" id="backgrnd" scrolling="yes" src="https://docs.google.com/document/d/16_jikyP9LfNibSOvM4XPeuB2jhf8YEYES1p8xhTBBDM/edit?usp=sharing"></iframe>
</div>
CSS:
#background-site {
position: relative;
}
#background-site.showOverlay:before {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: red;
z-index: 2;
}
JS :
document.getElementById("backgrnd").addEventListener("load", function() {
document.getElementById("background-site").classList.remove('showOverlay')
});
Fr the current code you could also use the parentElement, to achieve the same result, as the event fires on the iframe:
document.getElementById("backgrnd").addEventListener("load", function(e) {
e.target.parentElement.classList.remove('showOverlay')
});
Hi I've a working solution (see below).
Unfortunately it requires (vanilla) JavaScript; I hope you don't mind. I tried several CSS solutions like animations and all but to no avail.
Anyways, the trick is to use separate mouse in and mouse out event listeners on the iframe and overlays respectively.
document.getElementById("overlay").addEventListener("mouseover", overlayDisappear);
document.getElementById("theiframe").addEventListener("mouseout", overlayAppear);
function replaceAll(str, toFind, toReplace){
return str.replace(new RegExp(toFind.toString(),"g"), toReplace.toString());
}
function overlayAppear(){
//console.log("Appear", document.getElementById("overlay").className);
document.getElementById("overlay").className = replaceAll( document.getElementById("overlay").className, "_disappear","_appear");
}
function overlayDisappear(){
//console.log("Disappear", document.getElementById("overlay").className);
document.getElementById("overlay").className = replaceAll( document.getElementById("overlay").className, "_appear","_disappear");
}
#theiframe, #overlay{
width:200px;
height:200px;
position:fixed;
top:0;
left:0;
}
#theiframe{
border: 2px solid black;
}
#overlay{
background:red;
transition:all 0.3s ease;
}
#overlay._appear{
opacity:1;
z-index:1;
}
#overlay._disappear{
opacity:0;
z-index:-1;
}
/*
#overlay:hover{
animation-name: disappear;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes disappear{
0% { opacity:1; }
50% { opacity:0.5; }
99% { opacity:0; z-index:1; }
100% { opacity:0; z-index:-1; }
}*/
<iframe id="theiframe" src="https://samleo8.github.io/web"></iframe>
<div id="overlay" class="_appear"></div>
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>
Ok I tried to set the text in a span and when the div (consisting of the image and the text in it) was scrolled over it would set the span opacity to 0. It is not working though, and here is my code.
HTML
<div id="phild">
<td class="bio"> <img class="bio" src="phil.jpg" />
<span id="phils"><h2 id="philh">Phil</h2></span>
</td>
</div>
CSS to make the image opacity:1 when hovered
div#phild :hover{
opacity: 1;
transition: all .2s linear;
}
CSS to make the text opacity:0 when the entire thing (image and text) is hovered over
div#phild:hover span#phils{
opacity:0;
}
If the text is on top of the image, you can't use img:hover for your desired effect because when your cursor is on the text, it doesn't register as hovering the image. You could put the image and text inside something, and then have the text disappear when the parent is hovered
.bio {
position:relative;
float:left;
}
.bio img {
display:block;
}
.bio span {
position:absolute;
bottom:0;
left:0;
transition: all .2s linear;
}
.bio:hover span {
opacity:0;
}
<div class="bio">
<img src="http://placehold.it/100x100" />
<span>Text</span>
</div>
So long as youselectors are correct, the following should work all the way back to IE 6:
img.bio:hover{
opacity: 1; /* css standard */
filter: alpha(opacity=100); /* internet explorer */
}
There a number of ways to do this. Assuming your text follows your img element, you can use the hover pseudo-class and adjacent sibling selector to target the text and apply your CSS.
div {
position: relative;
display: inline-block;
}
.bio {
position: absolute;
top: 50%;
text-align: center;
width: 100%;
}
img:hover + .bio {
opacity: 0;
}
<div>
<img src="http://placehold.it/200x200" />
<span class="bio">Text Here</span>
</div>
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 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/