I have a <div> with a background-image. When this is hovered over I would like another image to be placed on top partially transparent so the original image can be seen below.
My current idea involved adding a :hover state and changing the above images display state to visible along with necessary z-index values.
Could someone give me an example with jsfiddle.net implementation?
Why not use opacity?
The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.
The value applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, an
element and its contained children all have the same opacity relative
to the element's background, even if the element and its children have
different opacities relative to one another.
.myTransparentImage{
opacity: 0;
}
.myTransparentImage:hover{
opacity: 0.6; /* it's in pourcentage */
}
This way, the transparent image, on hover, will appear at 60% opacity so you can still see the one below. So it is on top of the other image the whole time but only appears once hovered.
Here is an example in a fiddle: https://jsfiddle.net/5ob6n7nq/
Whipped up a quick example for you. Hit "Run code snippet" to see it in action.
.image-holder {
background: url('http://i.imgur.com/5ln9Vmi.jpg');
height: 500px;
width: 500px;
position: relative;
}
.image-holder::before {
content: '';
background: url('http://i.imgur.com/khYHDfJ.jpg');
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
}
.image-holder:hover::before {
opacity: .5; /* amount of opacity to blend the two images */
}
<div class="image-holder">
</div>
If I correctly understand you: https://jsfiddle.net/3jabz7d3/
<div class="block1">
<div class="block2"></div>
</div>
.block1 {
position: relative;
width: 200px;
height: 200px;
background: url(http://writm.com/wp-content/uploads/2016/08/Cat-hd-wallpapers-1080x675.jpg) no-repeat center center;
background-size: cover;
}
.block2 {
position: absolute;
width: 100%;
height: 100%;
background: url(http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg) no-repeat center center;
background-size: cover;
display: none;
opacity: 0.3;
}
.block1:hover .block2{
display: block;
}
Related
How do I set the opacity of a div background without affecting the text in hero-text? Right now hero-text inherits the opacity of ion-slide.
<style>
.slider {
height: 100%;
width: 100%;
}
.slide {
background-size: cover;
}
#one {
background: url(img/walkthrough-1.png) no-repeat;
opacity: 0.5;
}
#two {
background: url(img/walkthrough-2.png) no-repeat;
}
#three {
background: url(img/walkthrough-3.png) no-repeat;
}
.splash {
bottom: 0px;
}
.hero-text {
}
</style>
<ion-content class="splash" scroll="false">
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide id="one"><div class="hero-text">Test</div></ion-slide>
</ion-slide-box>
</ion-content>
If you need to only adjust the opacity of <ion slide id="xxx"> then I recommend breaking your .hero-text div out and adjusting your styling as necessary to keep your design correct.
With CSS you can adjust the opacity of a background color -- background-color: rgba(0, 0, 0, 0.5) -- which will create a 50% opaque black background color and not affect any children elements. But if you want to reduce the opaqueness of a background image then your only means are to use opacity which will of course affect children.
I used the same concept on a website that also used a "hero image" and I wanted the background image to fade in/out without affecting any text. You may need to use the following CSS to properly place everything:
.hero-wrapper {
position: relative;
}
.hero-wrapper > .bg {
background: ...;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 0;
}
.hero-wrapper > .text {
position: relative;
z-index: 10;
}
This should work, although it was freehand. Let me know if you want me to explain this anymore or provide a working example. Cheers ~
Edit
Here is a working example of my recommendation via Plnkr :)
Plnkr Demo
I've got a div with a background color and a transparent background image.
HTML
<div class="watermark">
<div class="col-md-12">Something else</div>
<div class="col-md-12">Something more..</div>
<div class="col-md-12">Something at the end</div>
</div>
CSS
body{
background-color:white;
}
.watermark {
display: block;
position: relative;
}
.watermark::after {
content: "";
background:#C52F11 url(https://www.google.co.in/images/srpr/logo11w.png)no-repeat;
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
jsfiddle
I want to be change the opacity of the image, but leave the background color unaffected. But when I set the opacity, both change.
Is there a way to do this?
Use an rgba color value and remove the opacity. For a white overlay you may use background:rgba(255,255,255, 0.5); while the last value (in this case 0.5) defines your transparency.
You can check this fiddle.
You can add a ::before pseudo-element to handle the background color, so that the ::after element has the image and opacity change, and the background-color can be unaffected. Note that the background-color of the actual .watermark element needs to be transparent, as the z-index:-1 will push the pseudo-elements behind the actual one.
.watermark {
width: 300px;
height: 100px;
display: block;
position: relative;
}
.watermark::before, .watermark::after {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.watermark::before {
background:#C52F11;
}
.watermark::after {
background: url(https://www.google.com/images/srpr/logo11w.png) no-repeat;
opacity: 0.2;
}
<div class="watermark">
<div class="col-md-12">Something else</div>
<div class="col-md-12">Something more..</div>
<div class="col-md-12">Something at the end</div>
</div>
Updated fiddle
CSS for body , whatever you want
body{
background-color:white;
}
main div(.watermark) with background color, width and height of your choice
.watermark {
width: 538px;
height: 190px;
display: block;
position: relative;
background: #C52F11;
}
watermark after CSS , image with opacity
.watermark::after {
content: "";
background: url('https://www.google.co.in/images/srpr/logo11w.png') no-repeat;
opacity: 0.4;
top: 0;
left: 0;
position: absolute;
z-index: 1;
width: 538px;
height: 190px;
}
I would recommend to use two divs. Its always a good idea to have two divs in overlapping stuffs with relative and absolute. Moreover, it adds long life to your code structure before you have to change it otherwise.
It's a trick:
Insert the image into the webpage anywhere(regardless of the size).
Set the desired opacity by style="opacity:0.7;" (for opacity= 0.7).
Take a snapshot of that image.
Remove that image and insert the snapped image where ever you want.
Goal
I would like to create an animated polygon which has parts of it trimmed/cut/masked out so the layer/element/background under it can be seen like this:
I created an animation with CSS3 transform. It is a rotating block that looks like its bottom parts are trimmed down while moving. I would like the trimmed part to show what is actually behind/under the rotating block (so its background).
What I tried
Illusion solution
For single color backgrounds, you can just add a shape on top of the animation so it have the illusion of being cut off.
This obviously doesn't work with pictures:
Limited solution
If you need to cut off the sides in with a rectangular shape, you can do that by a parent element, but this has obvious limitations. How to do something like this but with an arbitrary polygon? Can you mask in CSS?
body {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVQYV2NMqL7ty4ADMIIkF7SqbsYmP+gkAbAbGgsk/ddhAAAAAElFTkSuQmCC);
}
.center {
width: 200px;
margin: 0 auto;
padding-top: 50px;
height: 100px;
overflow: hidden;
}
.block {
height: 100px;
width: 100px;
background-color: red;
z-index: -1;
transition: transform 1000s 0s linear;
margin-left: 50px;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate {
animation: rotating 2s linear infinite;
}
<div class="center">
<div class="block rotate"></div>
</div>
to trigger z-index, you need to reset position to either: relative, fixed or absolute.
DEMO
#mask {
height: 100px;
width: 100px;
background-color: white;
z-index: 1;
position:relative;/* to trigger z-index */
}
To look like last example, background-position can be efficient.
DEMO box cut off from background
basicly:
body {
background: url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
background-size:100vw auto;
background-repeat: no-repeat;
}
#mask {
height: 100px;
width: 100px;
background:url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
background-size:100vw auto;
z-index: 1;
position:relative;
}
Unfortunately, this won't work with background-size:cover; since body and #mask have different size. background-size will need to be set via javaScript onload and onresize for #mask.
Have you tried to make the white box invisible with bigger z-index than the red box ?
Here you go: http://jsfiddle.net/QxG74/2/
Cute kitting version: http://jsfiddle.net/DpfW7/1/
Give the center div a height of 100 pixels and set the overflow to hidden. This way the rotating square get's trimmed at the bottom.
#center {
width: 200px;
height: 100px;
overflow: hidden;
}
Fiddle
I am trying to make the div #top opacity: 50%, so when you scroll, it will show a faded portion of the webpage below it. When I run this, however, it does not show opacity. It still shows solid.
CSS:
#top {
width: 100%;
height: 40px;
background: #96f226;
text-align: center;
font-size: 30px;
color: #252525;
position: relative;
position: fixed;
opacity: 50%;
}
HTML:
<div id='top'>Cuisine List</div>
opacity takes a decimal between 0 and 1, like so:
opacity: 0.5;
See MDN for more information.
Also,
you seem to have two positions - you should remove the first one
for position: fixed to work, you must specify at least one location, such as:
top: 0px;
which will anchor it to the top.
fixed fiddle
I have a few pictures in a table that they work as a link and in hover a play button should appear over them.
I tried many different tricks but they all have problems which dont work properly. I decieded to share my question here to find an standard solution.
Here is what I have done so far:
img{
position: relative;
}
img:hover:before {
background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
content:"";
width: 100%;
min-height: 100px;
position: absolute;
left: 0;
}
I dont know if I am in the right direction or not, but have a look at the demo http://jsfiddle.net/jmXdh/8/ and if it is wrong then please let me know any other way.
You unfortunately can't use the ::before and ::after pseudo-elements with replaced elements. The content of all replaced elements is outside the scope of CSS.
From the Generated and Replaced Content Module (WD):
Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.
Here's something that might work, assuming you can add additional markup:
http://jsfiddle.net/isherwood/jmXdh/11/
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a:hover .play {
background:url(http://placehold.it/80x80) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 80px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -50px;
}
<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
<b>Video test</b>
</a>
Or with a transition effect:
http://jsfiddle.net/isherwood/jmXdh/12/
.play {
opacity: 0;
transition: opacity 0.3s;
}
a:hover .play {
opacity: 0.7;
}