on my home page I have a grid block with 6 images on it
On hover, it becomes more transparent thanks to CSS (opacity: 0.6)
I also would like that when I hover on the button at the center of the image, the image itself keeps being transparent
Since it's not the case here
So I have applied some code here, but I couldn't figure why it doesn't work
.flexItem.grid_sections .button:hover ~ .grid_sections img {
opacity: 0.6;
}
Those elements appear on my homepage, 5th section
URL: https://www.tresor-ethnique.com/
Any idea?
Let me know, and thank you in advance :)
Pascal
Try
div {
height: 260px;
width: 260px;
position: relative;
}
div > img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
opacity: 0.6;
}
div > button {
position: absolute;
z-index: 2;
top: 45%;
left: 30%;
width: 80px;
height: 45px;
}
div > button:hover + img {
opacity: 1;
}
<div>
<button>Button</button>
<img src="https://via.placeholder.com/260x260">
</div>
NOTE: you must put the button tag before img tag
Related
I have a stackblitz here
This should be the simplest thing but I can't see why its not working.
I have react app with Typescript and a styled components, I'm sure none of that is the problem this is just css.
I'm trying to position two divs on top of each other.
The container has position: relative;
And then the div are absolutely positioned.
.FlexContainerColOne,
.FlexContainerColTwo{
position: absolute;
top: 0;
left: 0;
}
But both div disappear, what am I missing
From what I am seeing here is that they are not disappearing, you just can't see them because they don't have a width assigned or content. See the following, I added width, and opacity to show the two divs merging over each other.
stackblitz snippet
Result:
flexcontainer {
position: relative;
}
.FlexContainerColOne,
.FlexContainerColTwo {
position: absolute;
top: 0;
left: 0;
}
.FlexContainerColOne {
background: red;
height: 500px;
width: 500px;
opacity: 0.5;
}
.FlexContainerColTwo {
background: green;
height: 500px;
width: 500px;
opacity: 0.3;
}
<flexcontainer>
<div class="FlexContainerColOne"></div>
<div class="FlexContainerColTwo"></div>
</flexcontainer>
I use this loader spinner using css and jquery. I would like to blur the background exept the image from URL. Any idea ?
Css:
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
background: url("http://enjoycss.com/bg-img/custom/107898-1py1ieu.1zm9.gif")
center no-repeat #33333308;
}
Js
<script>
$(window).load(function() {
$(".se-pre-con").fadeOut("slow");;
});
</script>
Thank you
When the gif is showing you can add a :before pseudo-element to the body. The blurry effect can be tricky to achieve, I'd recommend using a blurry PNG or a svg as background, in the snippet below I'm just using color:
body:before{
content:'';
background-color: #dbdbdb;
opacity: 0.7;
background-size: cover;
width: 100%;
padding-bottom: 100%;
position: fixed;
z-index: 1;
}
You can replace the body selector with a class and then with some jQuery remove or add the class to the body.
See this fiddle for reference: https://jsfiddle.net/3r1zc9gw/3/
Is there any way to make semi-transparent overlapping elements, from which only higher z-index will be visible? I would like the images to be transparent to the background, but not to the other pictures. Here is fiddle.
body {
background: white;
}
section {
height: 400px;
position: relative;
perspective: 500px;
}
img {
height: 300px;
left: 50%;
margin: -100px;
position: absolute;
top: 40%;
transform: rotateY(-30deg);
width: 200px;
}
img:nth-child(1) {
left: 30%;
opacity: 0.8;
z-index: 3;
}
img:nth-child(2) {
left: 45%;
opacity: 0.4;
z-index: 2;
}
img:nth-child(3) {
left: 60%;
opacity: 0.2;
z-index: 1;
}
<section>
<img src="https://media4.s-nbcnews.com/j/newscms/2016_36/1685951/ss-160826-twip-05_8cf6d4cb83758449fd400c7c3d71aa1f.nbcnews-ux-2880-1000.jpg">
<img src="http://toprozdily.cz/wp-content/uploads/2015/04/slon-africky.jpg">
<img src="http://img.huffingtonpost.com/asset/,scalefit_950_800_noupscale/55fc14631c00004800082775.jpeg">
</section>
So what you're going to need to do is put the images each in their own div container and set the div background-color to white. That way you see the white background through the semi-opaque images and not the image underneath.
I edited your fiddle to give you the functionality you're looking for. Hope it helps!
There isn't a way to make an element be transparent to one element but opaque to another.
However, you might be able to simulate the transparency by tinting the images instead, either by positioning a partially-transparent div of that color over each image, or with CSS filters:
https://www.w3schools.com/cssref/css3_pr_filter.asp
I'm trying to position a font-awesome button on top of a canvas. My current markup:
<li id="container">
<i class="fa fa-plus"></i>
<canvas></canvas>
</li>
The container and the canvas are visible by default. When the user mouse-overs the container, the button also appears. However, it pushes the canvas downward, causing it to spill out of the container:
The container has position: absolute and I don't have any control over that (it's part of a plugin I'm using). I do have full control over the styling of the canvas and the button.
What makes this tricky is that the user can resize the container, and the button has to remain on the top center of it at all times. Currently that works fine, but I can't get it to also appear on top of the canvas.
Hover to see i.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #F72F4E;
}
#container {
position: absolute;
width: 50vmin;
height: 50vmin;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,.2);
}
#container:hover i {
opacity: 1;
transition: opacity .2s ease-out;
}
#container i {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 3;
text-align: center;
opacity: 0;
transition: opacity .2s ease-in;
}
#container canvas {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 5px solid green;
}
<li id="container">
<i class="fa fa-plus">i</i>
<canvas></canvas>
</li>
Have you tried to utilize the z-index?
If you don't know what it is you can read up on it here: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Essentially, you will have the button sit on top of all other elements.
Hope this gives some guidance.
Also! Just thought of this, try to mess around with the position property.
http://www.w3schools.com/cssref/pr_class_position.asp
The 'fixed' value will position your button relative to the DOM window, meaning other elements shouldn't have an effect on its position.
Resolved it by changing the font-awesome element to a div and setting its height to 0. It's z-index was already larger than that of the canvas.
I have a div with a background image that should be covered with a mask effect. On that div should be some content. I'm trying to get the content to be over the mask but for some reason it isn't working.
I added a jsFiddle:
http://jsfiddle.net/FHt9d/
Here is the code:
Html:
<div id="container">
<div id="mask"></div>
<div id="content"><h1>This is a header</h1></div>
</div>
Css
#container
{
width: 100%;
height: 246px;
position: relative;
background-repeat: no-repeat;
background-size: 100%;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/d/d8/Skyline_oklahoma_city.JPG')
}
#mask
{
z-index: 1;
height: 100%;
width: 100%;
background-color: rgba(75,139,228,.8);
position: absolute;
top: 0;
left: 0;
}
#content h1
{
z-index:2;
font-size: 32;
color: #fff;
}
The text should not be covered by the mask. Any help would be greatly appreciated,
Thanks!
try this (you missed a position: relative;):
#content h1 {
color: #FFFFFF;
position: relative; //missed
z-index: 2;
}
The elements that have
position: absolute
are always on top. Same thing applies to
position: fixed;
They always float above the elements in a browser.
To minimize this, you use
z-index: value;
For the elements with position value set, you can use:
z-index: 1;
and change it for the element you want to be above others
z-index: 2; /* or more than 2 */
This will do the job.
You missed a position: relative; on the #content h1. Indeed, z-index applies only on positionned elements.