I've been playing around with a css hover effect but I cannot figur out how I get the greyscale to work.
The hover effects works fine when hovering the "bg" image but when the cursor hits the "logo" image the greyscale of the "bg" stops.
I would like to have it working so only the "bg" is greyscale on hover and not the logo.
You can see it here http://codepen.io/Tonzr/pen/dNqVQQ
The HTML
<div class="container">
<div class="row">
<a href="" class="col-md-6">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample36.jpg" class="bg">
<img src="http://placehold.it/200x90/000000?text=LOGO" class="logo">
</a>
<a href="" class="col-md-6">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample83.jpg" class="bg">
<img src="http://placehold.it/200x90/000000?text=LOGO" class="logo">
</a>
</div><!-- END ROW -->
</div><!-- END CONTAINER -->
And here is the SASS
.col-md-6
position: relative
overflow: hidden
width: 100%
height: 25rem
padding: 0
.bg
position: absolute
left: 50%
top: 50%
height: auto
width: 100%
-webkit-transform: translate(-50%,-50%)
-ms-transform: translate(-50%,-50%)
transform: translate(-50%,-50%)
&:hover
-webkit-filter: grayscale(90%)
filter: grayscale(90%)
.logo
position: absolute
top: 50%
left: 50%
margin-right: -50%
transform: translate(-50%, -50%)
Thanks for your time.
Solution: http://codepen.io/anon/pen/YNOEMq
.col-md-6
position: relative
overflow: hidden
width: 100%
height: 25rem
padding: 0
&:hover .bg
-webkit-filter: grayscale(90%)
filter: grayscale(90%)
...
The problem is, if the cursor enters the logo element, the hover event propagation will not reach the bg element as they are siblings. So the solution is to catch the hover event at the parent anchor element, then affect the child bg.
Related
I've made a JSFiddle explaining what I would like to do with slick slide:
<div class="slider">
<div>
<div class="absolute">
Blabla
</div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
</div>
</div>
CSS
.absolute {
width: 100px;
height: 100px;
position: absolute;
top: -50px;
background-color: #900;
}
In short: The red box in the first slide is invisible because it's inside the slide that has overflow hidden. I need the box to be a part of the first slide only and move with the slide.
Can anyone fix the JSFiddle example so this works, that would be much appreciated.
I found a hack for this you have to set a margin-top or padding-top on each slide element.
.slick-slide{
padding-top:25px
//margin-top:25px also working
}
Working fine. Make sure red box should be position absolute & and each slider have position relative. so that your red box is belong to that slide only
.slider > div{
position: relative;
}
.absolute {
width: 100px;
height: 100px;
position: absolute;
top: -50px;
background-color: #900;
}
Due to SEO reasons I put my images into the body section rather than as background pictures like so:
<div id="fullpage">
<div class="slide" ><img class="l-cover" data-src="imagelink1"></div>
<div class="slide" ><img class="l-cover" data-src="imagelink2"></div>
<div class="slide" ><img class="l-cover" data-src="imagelink3"></div>
</div>
I tried to style the images like here:
https://jsfiddle.net/gnq52ygu/
I want the pictures to center, when the screen gets smaller. Right now the pictures stay fix at the left side.
As soon as I style the img tag there's some conflict with fullscreen.js.
Can anyone help me please?
Perfectly center? Both horizontally and vertically? This can be done like so:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I have a slider on a homepage I am currently working on. I am trying to achieve a full viewport height that takes up the whole width for the screen.
The only way I can currently achieve this is by either stretching the image, or the image isn't centred.
The image needs to be aligned roughly centred horizontally and vertically, so customers can see the centre of the image on any width of browser, and without stretching the image out of proportion.
I have tried the background-size: cover; on the element with no success as its not a background img. the containers have 100vh currently, but the width is the issue.
The issue is located here http://joeybox.info/ . I realise with the menu and the logo above the image the 100 viewport height will rest under the "fold", however I am placing the logo and menu over the image eventually, once I have figured out the css.
I have tried many solutions found within the stack overflow forum and none work in my scenario.
My current css, after deleting the in-correct code, is:-
.bx-wrapper img {display: inherit;
height: 100vh;
max-width: inherit;}
.ewic-wid-imgs {height: 100vh;
max-width: unset;
width: unset;}
.bx-wrapper img {display: inherit;
height: 100vh;
max-width: inherit;}
html=
<div class="slider-box">
<div id="ewic-con-385">
<div style="display: none;" id="preloader-385" class="sliderpreloader">
</div>
<div style="max-width: 100%; margin: 0px auto;" class="bx-wrapper">
<div style="width: 100%; overflow: hidden; position: relative; height: 633px;" class="bx-viewport">
<ul style="width: 315%; position: relative; left: 0px;" class="bxslider-385">
<li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
<div class="ewic-caption"><span>Qw Direct Leather Keyrings</span></div>
</li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
<div class="ewic-caption"><span>Qw Direct Leather Keyrings</span>
</div></li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg"><div class="ewic-caption">
<span>Qw Direct Leather Keyrings</span>
</div></li></ul></div>
<div class="bx-controls bx-has-controls-direction bx-has-controls-auto">
<div class="bx-controls-direction"><a class="bx-prev disabled" href="">Prev</a>
<a class="bx-next disabled" href="">Next</a></div><div class="bx-controls-auto"><div class="bx-controls-auto-item"><a class="bx-start active" href="">Start</a></div>
<div class="bx-controls-auto-item"><a class="bx-stop" href="">Stop</a></div></div></div></div><br>
</div>
</div>
To achieve this you could add to your image inside .bx-wraper:
.bx-wrapper img {
display: inherit;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width: inherit;
}
now you need to set the parent li to relative:
.bx-wrapper ul li {
position:relative;
width:100%;
height:100%;
list-style: none !important;
margin: 0 !important;
}
and change your parent ul:
.bx-wrapper ul{
width:100%;
}
I have solved the above by changing my image slider. My new slider plugin (Envoke Supersized) uses a background image and was easier to use background-size:cover; css. Although after this full viewport height on mobile widths didn't look good with my images so I used 40vh on mobile widths.
I would recommend anyone trying to do the same to ensure your image is a background image, or replace the slider with a static background image for small browser widths.
I'm wondering if it is possible to specify a div (example div2) or another sourrounding element of an image to fit the height and width to its child.
Besides, the image should resize (keep aspect ratio) to the full available space (div1) of the div2's parent.
As the image and therefore the aspect ratio, image orientation, hieght and width can change dynamically, no fixed sizing is possible
Here is an example fiddle:
http://jsfiddle.net/rp7u3u2r/1/
<div style="width:200px; height: 200px;">
<div style="max-height: 100%;max-width:100%;">
<img style="max-height: 100%;max-width: 100%;" src="..."/>
</div>
</div>
Expected behavior:
I already tried 'object-fit', 'fit-content', 'display: table-cell', 'display: inline-block', but nothing seems to work as expected.
updated fiddle http://jsfiddle.net/rp7u3u2r/3/
<div style="background-color:red; width:200px; height: 200px; font-size:0; line-height: 0;">
<div style="background-color: green; display: inline-block;">
<img style="width: auto; height: auto; max-height: 200px;max-width: 200px;"
src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
</div>
Use these styles:
#div1 {
width: 200px;
height: 200px;
}
#div2 {
box-sizing: border-box;
height: 100%;
float: left;
}
img {
height: 100%;
}
Both div2 and img will be constrained to the height of div1.
box-sizing allows you to add border and padding to div2 without overflowing div1.
Fiddle
I designed a background-image (a water pattern with sand at the bottom) for one of my websites that has a width of 230px and a height of 1230px.
What I want is for this image to
repeat itself horizontally to fill the whole 100% width
but stretch itself to 100% height of the browser window.
So, what I did was
<div style="position: fixed; top: 0; height: 100%; width:100%; z-index: -100;
background-image:url(bg.jpg); background-repeat: repeat-x"> </div>
but unfortunately this does not stretch the DIV's height to the current browser window.
The only way I saw was to write a div with several IMG tags in it:
<div style="position: fixed; top: 0; height: 100%; overflow: hidden;
width: 5000px; z-index: -99" align="left">
<img src="bg.jpg" style="height:100%" alt=""/>
<img src="bg.jpg" style="height:100%" alt=""/>
<img src="bg.jpg" style="height:100%" alt=""/>....and so on...</div>
This works like intended...but this can't be the correct practice? Considering accessibility this is a nightmare, no?
Thanks for your help!
just created a jsfiddle for your purposes:
http://jsfiddle.net/aT6J6/
try to play with, maybe that fits your requirements.
element
{
background-size: 100%;
}
for you example:
<div>
<div style="position: fixed; top: 0; height: 100%; width:100%; z-index: -100;background:url('http://www.noupe.com/wp-content/uploads/2009/10/pattern-13.jpg') repeat-x scroll 0 0 / 100% auto rgba(0, 0, 0, 0)">
</div>
</div>
updated fiddle:
http://jsfiddle.net/aT6J6/1/