How would I darken a background image on hover without making a new darker image?
CSS:
.image {
background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
width: 58px;
height: 58px;
}
JSFiddle link: http://jsfiddle.net/qrmqM/1/
Similar, but again a little bit different.
Make the image 100% opacity so it is clear.
And then on img hover reduce it to the opacity you want. In this example, I have also added easing for a nice transition.
img {
-webkit-filter: brightness(100%);
}
img:hover {
-webkit-filter: brightness(70%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
Thank you Robert Byers for your jsfiddle
How about this, using an overlay?
.image:hover > .overlay {
width:100%;
height:100%;
position:absolute;
background-color:#000;
opacity:0.5;
border-radius:30px;
}
Demo
I was able to achieve this more easily than the above answers and in a single line of code by using the new Filter CSS option.
It's compatibility in modern browsers is pretty good - 95% at time of writing, though less than the other answers.
img:hover{
filter: brightness(50%);
}
<img src='https://via.placeholder.com/300'>
If you want to darken the image, use an overlay element with rgba and opacity properties which will darken your image...
Demo
<div><span></span></div>
div {
background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
height: 400px;
width: 400px;
}
div span {
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: rgba(0,0,0,.5);
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
div:hover span {
opacity: 1;
}
Note: Am also using CSS3 transitions for smooth dark effect
If anyone one to save an extra element in the DOM than you can use :before or :after pseudo as well..
Demo 2
div {
background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
height: 400px;
width: 400px;
}
div:after {
content: "";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: rgba(0,0,0,.5);
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
div:hover:after {
opacity: 1;
}
Using some content over the darkened overlay of the image
Here am using CSS Positioning techniques with z-index to overlay content over the darkened div element.
Demo 3
div {
background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
height: 400px;
width: 400px;
position: relative;
}
div:after {
content: "";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: rgba(0,0,0,.5);
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
div:hover:after {
opacity: 1;
}
div p {
color: #fff;
z-index: 1;
position: relative;
}
You can use opacity:
.image {
background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
width: 58px;
height: 58px;
opacity:0.5;
}
.image:hover{
opacity:1;
}
JSFiddle
you can use this:
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
as seen on: https://stackoverflow.com/a/24084708/8953378
Here is a "shade" class that you can add directly to any <img> tag like so
<img src="imgs/myimg.png" class="shade">
img.shade:hover {
-webkit-filter: brightness(85%);
-webkit-transition: all 10ms ease;
-moz-transition: all 10ms ease;
-o-transition: all 10ms ease;
-ms-transition: all 10ms ease;
transition: all 10ms ease;
}
Add css:
.image{
opacity:.5;
}
.image:hover{
// CSS properties
opacity:1;
}
try this
http://jsfiddle.net/qrmqM/6/
CSS
.image {
background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
width: 58px;
height: 58px;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.image:hover{
background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
width: 58px;
height: 58px;
border-radius:100px;
opacity:1;
filter:alpha(opacity=100);
}
HTML
<div class="image"></div>
Try following code:
.image {
background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
width: 58px;
height: 58px;
opacity:0.2;
}
.image:hover{
opacity:1;
}
.image:hover {
background: #000;
width: 58px;
height: 58px;
border-radius:60px;
}
You will get darken
The simplest way to do it without adding an extra overlay element, or using two images, is to use the :before or :after selector.
.image {
position: relative;
}
.image:hover:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
top: 0;
left:0;
}
This will not work in older browsers of course; just say it degrades gracefully!
If you have to use the current image and get a darker image then you need to create a new one. Else you can simply reduce the opacity of the .image class and the in the .image:hover you can put a higher value for opacity. But then the image without hover would look pale.
The best way would be to create two images and add the following :
.image {
background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
width: 58px;
height: 58px;
opacity:0.9;
}
.image:hover{
background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook_hover.png');
}
}
I would add a div around the image and make the image change in opacity on hover and add an inset box shadow to the div on hover.
img:hover{
opacity:.5;
}
.image:hover{
box-shadow: inset 10px 10px 100px 100px #000;
}
<div class="image"><img src="image.jpg" /></div>
Just try this code.
img:hover
{
box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset;
-webkit-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset;
-moz-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset;
-o-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset;
}
Related
I am trying to use simple transiton, but I don't understand why it is not working. Could you help me? I put transition: ease-in-out; in container...
my code:
.container{
width:250px;
height:300px;
background:#00f;
position:relative;
transition: ease-in-out;
}
.show{
display: none;
position:absolute;
bottom:0;
height:50%;
width:100%;
color:#000;
text-indent:5px;
background:rgba(255,255,255,.5);
}
.container:hover > .show{
display:block;
}
http://jsfiddle.net/mAzsL/44/
I use this as example: http://jsfiddle.net/n7Ne9/53/
UPDATE:
My aim was to get effect which is called 'fade in a box' - I wasn't precise, sorry.
Update:
On new requirements, the transition effect needs to be different, please refer the below snippet.
.container {
width: 250px;
height: 300px;
background: #00f;
position: relative;
}
.show {
position: absolute;
opacity:0;
height:30%;
bottom:0px;
left:0px;
right:0px;
color: #000;
text-indent: 5px;
background: rgba(255, 255, 255, .5);
transition: opacity 0.5s ease-in-out;
}
.container:hover>.show {
opacity:1;
}
<div class="container">
<div class="show">Lorem </div>
</div>
Old Answer:
The problem is transition property cannot be applied to the CSS property display:none, the workaround for this is to set the height to 0px initially, a problem you will face is that the text will still be visible on the screen. For this overflowing text to be hidden, use the CSS class overflow:hidden which will hide the content which is outside the element. Also instead of using transition on the parent element, use it directly on the element itself. Refer the below class.
.show{
position:absolute;
overflow:hidden;
bottom:0;
height:0px;
width:100%;
color:#000;
text-indent:5px;
background:rgba(255,255,255,.5);
transition: height 1s ease-in-out;
}
The transition property should be as follows.
transition: height 1s ease-in-out;
First mention which property should have the transition effect. Then duration of the transition, then whether ease-in or some other setting.
Then on hover, set the original height. The transition will be seen.
.container:hover > .show{
height:50%;
}
.container {
width: 250px;
height: 300px;
background: #00f;
position: relative;
}
.show {
position: absolute;
overflow: hidden;
bottom: 0;
height: 0px;
width: 100%;
color: #000;
text-indent: 5px;
background: rgba(255, 255, 255, .5);
transition: height 1s ease-in-out;
}
.container:hover>.show {
height: 50%;
}
<div class="container">
<div class="show">Lorem </div>
</div>
I have a div with class .side-buttons. This div will slide in and off when user's mouse hover over the div. I was wondering how can I hide the div completely and say when the user's mouse is in the area it would slide in?
I tried getting the off the screen but that wouldn't work as it would only work when my mouse on the div
This is my website - http://smati.ca/test/index.html (Don't click continue but instead click around the popup modal to get off the modal overlay. There you can see the div in action)
Here's my css code :
.side-buttons {
position: absolute;
right: -100px;
top: 55%;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.side-buttons:hover {
right: 0px;
}
.side-buttons a {
display: block;
background: linear-gradient(to bottom, #33a9c3 15%, #b1ccbb 100%);
border-radius: 0;
box-shadow: none;
border: none;
color: #f5f5f5;
font-size: 22px;
font-family: "Lato", sans-serif;
}
.side-buttons a small {
font-size: 16px;
}
.side-buttons a:hover,
.side-buttons a:focus,
.side-buttons a:active {
background: linear-gradient(to bottom, #33a9c3 15%, #b1ccbb 100%);
color: #f5f5f5;
}
.side-buttons a:nth-child(2) {
background: linear-gradient(to left, #de3c88 15%, #f0a473 100%);
}
You could try something like this too i.e wrapping it by a div and performing that slide-in and slide-out effect on child div as below,
#bx{
width:210px;
height:120px;
position:absolute;
top:40%;
right:0;
overflow:hidden;
border:1px solid rgba(0,0,0,0.1);
}
#bx > .b{
position:absolute;
width:200px;
height:120px;
background:blue;
right:-200px;
transition:0.6s ease;
}
#bx:hover > .b{
right:0px;
}
<div id="bx">
<div class="b">
</div>
</div>
You can use a pseudo element, like this
html, body {
margin: 0;
}
div {
position: absolute;
width: 0;
right: 0;
height: 150px;
background: red;
transition: width 0.5s;
}
div::after {
content: '';
position: absolute;
width: 30px;
right: 100%;
height: 100%;
transition: width 0s 0.5s;
border: 1px dotted gray; /* added for demo purpose */
}
div:hover {
width: 100px;
transition: width 0.5s;
}
div:hover::after {
width: 0;
transition: width 0.5s;
}
<div>
</div>
Here is another option, that might be easier to add to your existing solution
html, body {
margin: 0;
}
.content {
width: 170px;
padding: 50px 30px;
background: lightgray;
}
.wrapper {
position: absolute;
right: 0;
width: 0;
padding-left: 30px;
overflow: hidden;
transition: width 0.5s, padding-left 0s 0.5s;
border: 1px dotted gray; /* added for demo purpose */
}
.wrapper:hover {
width: 200px;
padding-left: 0;
transition: width 0.5s, padding-left 0.5s;
}
<div class="wrapper">
<div class="content">
Some text and/or images<br>
or anything else needed
</div>
</div>
Here's the page upon which I'm working.
I'm using Shortcodes Ultimate to get the columns, and it's responsive. Now I'm trying to get a text hover with background over the images, preferably without JS for now. I can get it to hover perfectly if it's given defined height and width, but then that's not responsive.
On CodePen, it shows the title going all the way across the page, but the Shortcodes Ultimate columns eliminate that. But it probably isn't best design, either.
I've followed about 20 different tutorials to get where I am, but am stuck now.
CodePen
HTML:
<div id="portfolio_hover_wrapper">
<a href="#" class="wistia-popover">
<img src="https://embed-ssl.wistia.com/deliveries/b9d3c0914d895ac2fb274c0c8798ad66f6e5d4f0.jpg?image_crop_resized=640x360" alt="" class="hover" />
<span class="portfolio-hover-text"><span>ADO Rowing</span>
</a>
</div>
CSS:
#portfolio_hover_wrapper {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
#portfolio_hover_wrapper a {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
}
span.portfolio-hover-text {
background: rgba(27,187,230,0.8);
color: white;
display: table;
font-size: 3em;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#portfolio_hover_wrapper a:hover span.portfolio-hover-text {
opacity: 1;
}
span.portfolio-hover-text span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
If I understand what you want try using top: 50%; transform: translateY(-50%); in .portfolio-hover-text.
My bad I misunderstood your question, try adding the following:
span.portfolio-hover-text {
background: rgba(27,187,230,0.8);
color: white;
display: block;
font-size: 3em;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.portfolio-hover-text span{
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
white-space: nowrap;
}
In order to overlay text over an image I like to set the parent DIV to have the image as a background and child the text to it like such
<div class="box image1">
<div class="overlay fade">
<span class="text">ADO Rowing</span>
</div>
</div>
CSS
.box {
width: 75%; /*To make it responsive*/
height: 40em;/*Height should be fixed*/
box-shadow: inset 0px 2px 7px 0 rgba(0, 0, 0, .6);/*just for looks*/
margin: 5% auto 0 auto; /*Centers the div*/
border-radius: 5px; /*just for looks*/
overflow: hidden; /*Needed if our text overflows*/
}
.image1 {
background: url(https://embed-ssl.wistia.com/deliveries/b9d3c0914d895ac2fb274c0c8798ad66f6e5d4f0.jpg?image_crop_resized=640x360);/*Image*/
background-size: cover;/*Makes the background look responsive*/
background-position:center;/*for looks*/
}
Now we need to style the overlay. More CSS
.overlay {
background: rgba(33, 150, 243, .6);/*Overlay color*/
text-align: center;
padding: 1em 0 1em 0;/*adjust this if you want it cover the entire img*/
height:25%;/*Change this to 100% for whole image*/
opacity: 0;
margin: 25% 0 0 0;/*Moves the banner down*/
box-shadow: 0 2px 7px rgba(33, 150, 243, .4);
}
.text {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 96px;
}
Padding will increase the div size and thus increase the color size, while margin will just space the div out without changing the size of the background, so I use margin to position and padding for sizing.
lastly we need to make some snappy animation on :hover
.fade {
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
-ms-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.box:hover .fade {
opacity:1;
}
That will change the opacity from 0 to 1 on hover with a .25s tranisition. That should be about it, hope that helps. View the CodePen Here
I was trying to implement splitting of entire content to create a slideshow. Something similar to this.
http://tympanus.net/Tutorials/FullscreenSlitSlider/
The problem is splitting of divisions equally. I just don't want them to appear to be split but actually split with the first div containing all content but only top 50% height of actual content, and second div containing all content but having only bottom 50% height of original div.
Here's what I have so far.
.container {
position: absolute;
width: 100%;
height: 20%;
}
.slide1, .slide2 {
width: 100px;
height: 50%;
/*height: 100%;*/
overflow: hidden;
position: absolute;
color: #AAA;
}
.slide1 {
background: #F00;
}
.slide2 {
top: 50%;
background: #0F0;
}
Here's a fiddle link.
UPDATE: This is what I want the end result to look like. This is just a quick hack that appears as though second div is split.
If you just viewed source in the demo site you supplied, you might have seen this bit of code:
<script type="text/javascript" src="js/jquery.slitslider.js"></script>
And if you googled jquery slitslider, the first link you get is FULLSCREEN SLIT SLIDER WITH JQUERY AND CSS3
Do you looking for this..
.container {
position: absolute;
width: 100%;
height: 100%;
}
.slide1, .slide2 {
width: 100px;
height: 100px;
overflow: hidden;
color: #AAA;
}
.slide1 {
background: #F00;
}
.slide2 {
top: 50%;
background: #0F0;
}
Fiddle: http://jsfiddle.net/6Kz7c/3/
EDIT:
Fiddle: http://jsfiddle.net/6Kz7c/5/
This uses a jquery plugin call FULLSCREEN SLIT SLIDER
So You no need to implement it from the sketch.
Here you can find a tutorial how to use that and download the library.
http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/
Edit:
css
* {
margin: 0;
padding: 0;
}
body {
background: #222;
}
.reveal {
width: 300px;
height: 300px;
margin: 50px;
float: left;
}
.curve {
background: url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px 150px, url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px -225px, #f6d9ad;
background-repeat: no-repeat;
-webkit-transition: background-position 0.3s ease;
-moz-transition: background-position 0.3s ease;
-o-transition: background-position 0.3s ease;
-ms-transition: background-position 0.3s ease;
transition: background-position 0.3s ease;
}
.curve:hover {
background: url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px 210px, url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px -285px, #f6d9ad;
background-repeat: no-repeat;
}
.reveal p {
font: 45px/300px Helvetica, Arial, sans-serif;
text-align: center;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.reveal:hover p {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
cursor: pointer;
}
html
<div class="reveal curve">
<p>lorem</p>
</div>
Fiddle is here
The same principle as that of vertical splitting can be used for horizontal as well. The HTML layout had to be modified a bit to get it working.
HTML
<div class="container">
<div class="slide-wrapper">
<div class="slide1">
<div class="slide-content">Some content that has fixed width and positioned absolutely.</div>
</div>
<div class="slide2">
<div class="slide-content">Some content that has fixed width and positioned absolutely.</div>
</div>
</div>
</div>
Here's a working fiddle.
http://jsfiddle.net/6Kz7c/8/
Is it possible to add an opacity transition to CSS3 div overlay target?
JSFIDDLE: http://jsfiddle.net/pb7St/
#content {
background-color: #ccc;
height: 300px;
width: 300px;
z-index:1;
}
.overlaystyle {
height: 100px;
width: 100px;
background-color: #000;
left: 20px;
top: 20px;
position: absolute;
z-index:2;
opacity: 0;
-webkit-transition: opacity 1s ease;
}
#overlay {
display:none;
}
#overlay:target {
display:block;
opacity: 1;
}
Is there any other (better) way to close / hide the div? Currently I'm using:
href="#_"
Yes, there is:
JSFiddle Demo
CSS
.overlaystyle {
height: 100px;
width: 100px;
background-color: #000;
left: 20px;
top: 20px;
position: absolute;
z-index:2;
opacity: 0;
-webkit-transition: opacity 1s ease, visibility 1s 0s; /* added visibility transition */
}
#overlay {
//display:none;
visibility:hidden
}
#overlay:target {
//display:block;
visibility:visible;
opacity: 1;
}
EDITED to add transition to visibility with delay for fade-out effect. Personally, I'd go with JQuery. :)