So what I want is that when an image is hovered over the black overlay I have added with the :before covers the div and then I will add text and an image over the top of that later. With the current code it doesn't even seem to be recognising the hover. I'm also using foundation. Help would be much appreciated :)
<div class="small-12 large-4 columns">
<img class="tri" src="media/images/mountain.jpg">
</div>
.tri{
position: relative;
overflow: hidden;
display: block;
}
.tri:before{
opacity: 0.8%;
top: 100%;
width: 100%;
height: 100%;
transition: all 0.4s;
background-color: black;
position: absolute;
content: '';
}
.tri:hover::before{
top: 0%;
}
Unfortunately, ::before and ::after psuedoclasses aren't supported on self-closing elements like img and input.
You could simply wrap an additional div around the img and put the :hover and ::before properties on that.
Related
How could we use CSS mix-blend-mode, if the background image/video is not the parent of the element which gets the mix-blend-mode?
For example
<div class="has-video-background">
<video></video>
</div>
<div class="caption-above-video">
<h1>This div should have a colored background with a mix-blend mode multiply</h1>
</div>
The div with the class .caption-above-video should have a colored background with a mix-blend-mode. But the effect not appears. When using mix-blend-modes somewhere, the element with the blend-mode is the direct child of the parent with the background image, but in this example this is not possible because of a full with and height background video. Also I cannot manipulate the DOM output, because its coming from a page builder.
How could we use CSS mix-blend-mode effects when the containers are siblings?
Mix-blend-mode does not work with siblings.
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#effect_of_different_mix-blend-mode_values
I actually can't see what the problem is.
If you overlay the video with another element (by giving that element position absolute and the same size as the video for example - but there are lots of ways of doing this) and they are siblings (i.e have the same parent) then the mix-blend-mode seems to work perfectly well.
.parent {
width: 80vmin;
position: relative;
}
video {
position: relative;
width: 100%;
}
.caption-above-video {
background: red;
mix-blend-mode: multiply;
position: absolute;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="parent">
<div class="has-video-background">
<video src="https://www.w3schools.com/HTML/movie.mp4" controls autoplay></video>
</div>
<div class="caption-above-video">
<h1>This div should have a colored background with a mix-blend mode multiply</h1>
</div>
The only thing I did 'extra' was to make the overlaying element have pointer events of none so that I could use the controls on the video. If you need pointer events on the overlay then you'll need to implement the video controls yourself e.g. with JS.
As far as I know, it comes down to which div is on top. So by using position: absolute; and a z-index for example, you add mix-blend-mode to the div that is "on top" of the other div.
I added a code snipped so you can see what I've done to accomplish this.
-I did add a container around the two divs for styling purposes for this example.
-Added an extra div in the .caption-above-video that has the background-color and mix-blend-mode. This is important if you don't want the h1 to be affected by the mix-blend-mode, because that affects all children too.
Also added an background-image to the .has-video-background so you can see the result better. This is for demonstration purposes only and as soon as you add the actual video, the result will be the same.
.container{
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 400px;
height: 300px;
}
.has-video-background{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url('https://cdn.pixabay.com/photo/2022/08/09/16/19/sea-7375377_960_720.jpg');
background-size: cover;
background-repeat: no-repeat;
background-color: lightblue;
}
.caption-above-video{
position: absolute;
width: 200px;
height: 150px;
}
h1{
position: relative;
z-index: 2;
color: white;
}
.background-div{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
mix-blend-mode: multiply;
background-color: green;
}
<div class="container">
<div class="has-video-background">
<video></video>
</div>
<div class="caption-above-video">
<h1>Caption</h1>
<div class="background-div"></div>
</div>
</div>
I need to place NON-transparent text on an image. This image is defined in the html. (This is so it can be dynamic). I style the transparency with an :after pseudo element. I would like to have text on this image. apprecaited
However, the problem I'm running into is that the text inherits the transparency. All of the other solutions I have found either define the picture in CSS or don't use a picture at all. Any help would be appreciated, thanks!
EDIT: A colored transparency is desired.
<div class="col-md-6" id="red-square-parent">
<%= image_tag 'infos/home/teaching-3.jpg' %>
<div class="centered">Don't Apply Transparency to me!</div>
</div>
#red-square-parent img{
height: 100%;
width: 100%;
object-fit: none;
}
// Overlay
#red-square-parent:after{
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba($comp-color-red, 0.7);
}
So, the issue is that you're applying transparency to the parent element. Just target the image specifically for transparency:
JSFiddle
#red-square-parent img{
position: relative;
opacity: 0.5;
}
#red-square-parent div{
position: absolute;
bottom: 40px;
color: black;
font-size: 50px;
}
<div class="col-md-6" id="red-square-parent">
<img src="http://i.imgur.com/eTmzQ.jpg"/>
<div class="centered">Don't Apply Transparency to me!</div>
</div>
In order to apply a coloured filter over this image, you will not be applying background-color as this will not change the color of the image at all.
What you instead need to do it a bit complicated, but you must apply a filter to the image.
I would recommend using a tool such as this: CSS Generator - Filter to get the desired color effect you want.
When you have the desired filter, update your code to look something like this (using the code generated from the CSS Generator - Filter site. See my JSFiddle
#red-square-parent img{
position: relative;
opacity: 0.5;
/* Filter */
filter: grayscale(50%) opacity(1) brightness(100%) contrast(100%) hue-rotate(500deg);
-webkit-filter: grayscale(50%) opacity(1) brightness(100%) contrast(100%) hue-rotate(500deg);
}
#red-square-parent div{
position: absolute;
bottom: 40px;
color: black;
font-size: 50px;
}
<div class="col-md-6" id="red-square-parent">
<img src="http://i.imgur.com/eTmzQ.jpg"/>
<div class="centered">Don't Apply Transparency to me!</div>
</div>
I'm not super comfortable with JS , but that seems to be the best way to do this , having a hard time applying other peoples solutions to my scenario.
Want an image to appear when hover over text.
I can get the image to appear on hover, but it appears up way up at top of page, and I am having a hard time getting it to appear in the viewport without indicating what the top margins is. Is that the best way to do it?
So far I have:
<div id="popup">
<div class="large-6 columns">
Bristol Hayward-Hughes <span> <img src="bristol.jpg" alt="Bristol" id="bristol"> </span>
</div>
</div>
and
#popup span {
display: none;
}
#popup a:hover span {
display: block;
position: absolute;
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
#bristol {
position: absolute;
z-index: 1;
margin-top: 100px;
}
If I'm understanding the question correctly, you'll need to place position:relative; in the parent Div: #popup that the image is residing in.
Check this Fiddle for reference: https://jsfiddle.net/rjschie/q87um7wd/2/
For an example: comment the position:relative; line under #popup and re-run the example. You'll see that the Image appears at the top of the window. Then uncomment it, and re-run and it will appear relative to the #popup div.
Please give relative positioning to your span that holds your image.
#popup a:hover span {
display: block;
position: relative; // Changed absolute to relative
//Give top and left position with respect to your anchor tag.
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
Remove the margin-top from the image tag as well.
#bristol {
position: absolute;
z-index: 1;
/*margin-top: 100px;*/ //Removed margin-top on the image
}
Hi i am aware that you can add a greyscale filter on an image, but would it be possible for a white overlay using the filter setting. I have to do it through css without the need for another div, to be absolute positioned over the image, with a white background and opacity setting changed. Just a simple image within a a tag:
<a href="#">
<img src="http://placehold.it/300x200" />
</a>
css is basic
a img{
display:block;
max-width:100%;
height:auto
}
Solution 1:
You may use the :after psuedo-element. For example, add a class of white-out to your <a> element, and then use the following CSS:
a.white-out {
position: relative;
display: inline-block;
}
a.white-out:after {
position: absolute;
content: '';
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,.5);
}
jsFiddle Demo
Solution 2:
Alternatively, you can try setting a white background on your <a> element, and reducing the opacity of the <img /> inside. For example:
a.white-out {
display: inline-block;
background: #fff;
}
a.white-out img {
opacity: 0.2;
}
jsFiddle Demo
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;
}