This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 1 year ago.
I have a background image shown with partial opacity for a <section> element (on the snippet it spreads on everything for some reason, on the browser it limits the image to the section..).
The issue is that the image also covers the inner HTML tags in the section.
I tried to use z-index: -1; on the CSS, but then the image does not show when hovering over the inner HTML tags.
How can it be achieved?
The code
.card {
background-image: linear-gradient(to bottom right, white, lightgray);
border-radius: 10px;
-webkit-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
justify-content: center;
margin: 20px;
padding: 20px;
max-width: 80rem;
}
.card:hover {
animation: glow 1.2s infinite alternate;
}
#keyframes glow {
from {
-webkit-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
}
to {
-webkit-box-shadow: 3px 3px 30px 0px #3d6ded;
-moz-box-shadow: 3px 3px 30px 0px #3d6ded;
box-shadow: 3px 3px 30px 0px #3d6ded;
}
}
.bg-image {
background-image: url('https://cdn.pixabay.com/photo/2021/03/20/10/26/field-6109500_960_720.jpg');
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
border-radius: 10px;
opacity: 0;
transition: ease-in-out 0.6s;
}
.bg-image:hover {
opacity: 0.6;
}
<!DOCTYPE html>
<html lang="en">
<body>
<section class="card">
<div class="bg-image"></div>
<h2>
H2 heading
</h2>
<p>
This is a <strong>paragraph</strong>. I like paragraphs. Paragraphs are very nice.
</p>
</section>
</body>
</html>
Your question is not very clear but from what I understand you want an image to show in the background of a box when the box is hovered.
First of all, you should remove the hover from the image and set it to it's parent like so:
.card:hover .bg-image {
opacity: 0.6;
}
Since, you had the hover on the image itself, z-index on the image was placing the image behind the other inner elements which caused the hover event not to be triggered since you weren't actually hovering on the image.
Put z-index back on the image along with the code I've provided above. It should hopefully solve your problem.
You need position: relative on the section too or else the image will break out of the section and mess the layout.
Your question is not clear, are you looking to do this ?
i just added a relative position to card, put tags into a div and add class
.card-div {
position: relative;
z-index: 2;
}
.card-div:hover + .bg-image {
opacity: 0.6;
}
to it.
.card {
background-image: linear-gradient(to bottom right, white, lightgray);
border-radius: 10px;
-webkit-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
justify-content: center;
margin: 20px;
padding: 20px;
max-width: 80rem;
position: relative;
}
.card:hover {
animation: glow 1.2s infinite alternate;
}
#keyframes glow {
from {
-webkit-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
}
to {
-webkit-box-shadow: 3px 3px 30px 0px #3d6ded;
-moz-box-shadow: 3px 3px 30px 0px #3d6ded;
box-shadow: 3px 3px 30px 0px #3d6ded;
}
}
.bg-image {
background-image: url('https://cdn.pixabay.com/photo/2021/03/20/10/26/field-6109500_960_720.jpg');
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
border-radius: 10px;
opacity: 0;
transition: ease-in-out 0.6s;
z-index: 1;
}
.bg-image:hover {
opacity: 0.6;
}
.card-div {
position: relative;
z-index: 2;
}
.card-div:hover + .bg-image {
opacity: 0.6;
}
<!DOCTYPE html>
<html lang="en">
<body>
<section class="card">
<div class="card-div">
<h2>
H2 heading
</h2>
<p>
This is a <strong>paragraph</strong>. I like paragraphs. Paragraphs are very nice.
</p>
</div>
<div class="bg-image"></div>
</section>
</body>
</html>
Related
I have parent div and four child divs. the parent element is a container and child elements are buttons. I set the CSS property of the button to increase its border-width when I hover on it. the actual problem is whenever the button increases its border-width; the entire webpage moving. how can I make the webpage stable?
#theme-options-wrapper {
display: flex;
justify-content: center;
}
.theme-button {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: black;
margin: 5px;
cursor: pointer;
border: 2px solid #000000;
-webkit-box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69);
-moz-box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69);
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69);
}
.theme-button:hover {
border-width: 5px;
}
#light-mode {
background-color: #ffff;
}
#blue-mode {
background-color: #192734;
}
#green-mode {
background-color: #78866b;
}
#purple-mode {
background-color: #7e4c74;
}
<div id="theme-options-wrapper">
<div data-mode="light" id="light-mode" class="theme-button"></div>
<div data-mode="green" id="green-mode" class="theme-button"></div>
<div data-mode="purple" id="purple-mode" class="theme-button"></div>
<div data-mode="blue" id="blue-mode" class="theme-button"></div>
</div>
here the page URL link
https://nanthu0123.github.io/portfolio/
image of buttons (child elements)
buttons-img
here the source code
https://github.com/nanthu0123/portfolio
hey, add box-sizing: border-box; property to your .theme-button class.
UPDATE:
also if you want make your button larger add transform: scale(1.3); to your pseudo class (.theme-button:hover)
One option is to simply not use the border to draw the border, instead use the box-shadow property, which can take a comma-separated list of box-shadow definitions; below I've added a 2-pixel 'fake border' after the definition of the original box-shadow:
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000;
And, within the :hover pseudo-class expanded that 2-pixel size to 5-pixels:
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000;
As the box-shadow doesn't take space in the document it won't force elements to reflow (though obviously a repaint is required to show the changed shadow).
#theme-options-wrapper {
display: flex;
justify-content: center;
}
.theme-button {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: black;
margin: 5px;
cursor: pointer;
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000;
}
.theme-button:hover {
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000;
}
#light-mode {
background-color: #ffff;
}
#blue-mode {
background-color: #192734;
}
#green-mode {
background-color: #78866b;
}
#purple-mode {
background-color: #7e4c74;
}
<div id="theme-options-wrapper">
<div data-mode="light" id="light-mode" class="theme-button"></div>
<div data-mode="green" id="green-mode" class="theme-button"></div>
<div data-mode="purple" id="purple-mode" class="theme-button"></div>
<div data-mode="blue" id="blue-mode" class="theme-button"></div>
</div>
This can also be transitioned/animated – the colour, length or both – if required, with a single line:
transition: box-shadow 0.2s linear;
#theme-options-wrapper {
display: flex;
justify-content: center;
}
.theme-button {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: black;
margin: 5px;
cursor: pointer;
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000;
transition: box-shadow 0.2s linear;
}
.theme-button:hover {
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000;
}
#light-mode {
background-color: #ffff;
}
#blue-mode {
background-color: #192734;
}
#green-mode {
background-color: #78866b;
}
#purple-mode {
background-color: #7e4c74;
}
<div id="theme-options-wrapper">
<div data-mode="light" id="light-mode" class="theme-button"></div>
<div data-mode="green" id="green-mode" class="theme-button"></div>
<div data-mode="purple" id="purple-mode" class="theme-button"></div>
<div data-mode="blue" id="blue-mode" class="theme-button"></div>
</div>
Reference:
box-shadow.
transition.
Basically I have a div that when hovering on it, the text moves to the right. I would like to achieve some effect as if the text were lost inside the div while moving to the right.
.rectangulo_categoria {
border-radius: 34px;
border: 2px solid red;
width: 195px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 8px 4px 10px -1px rgba(0, 0, 0, 0.75);
}
.rectangulo_categoria:hover .texto_engranen_1 {
transform: translate(168px, 0px);
opacity: 0;
}
.texto_engranen_1 {
line-height: 1;
pointer-events: none;
z-index: 1;
font-size: 12px;
width: auto;
font-weight: 400;
pointer-events: none;
line-height: 1;
transition: 0.5s all ease-out;
opacity: 1;
color: #343434;
}
<div class="rectangulo_categoria" mdbWavesEffect>
<p class="texto_engranen_1 p-0 m-0">Gestion Recursos de Apoyo Académico</p>
</div>
this is my full code:
https://jsfiddle.net/te0p2fqb/
You can add a overflow: hidden; on the div. Also I re-arranged your classes and removed some duplicate props.
.rectangulo_categoria {
border-radius: 34px;
border: 2px solid red;
width: 195px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 8px 4px 10px -1px rgba(0, 0, 0, 0.75);
overflow: hidden;
}
.texto_engranen_1 {
line-height: 1;
z-index: 1;
font-size: 12px;
width: auto;
font-weight: 400;
pointer-events: none;
transition: 0.5s all ease-out;
opacity: 1;
color: #343434;
}
.rectangulo_categoria:hover .texto_engranen_1 {
transform: translate(168px, -50%);
opacity: 0;
}
<div class="rectangulo_categoria" mdbWavesEffect>
<p class="texto_engranen_1 p-0 m-0">Gestion Recursos de Apoyo Académico</p>
</div>
EDIT
Sure check the code on fiddle for aboslute solution. The main changes are that I removed the flex and its attributes, also reset the margin and padding on the <p>.
add overflow: hidden; to your .rectangulo_categoria class
.rectangulo_categoria{
border-radius: 34px;
border: 2px solid red;
width: 195px;
height: 50px;
display: flex;
justify-content: center;
align-items:center;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 8px 4px 10px -1px rgba(0, 0, 0, 0.75);
overflow: hidden; // this is your solution
}
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 4 years ago.
I'm trying to add an inner shadow to an image, but I can't get the result that I want.
Here's what I have currently:
https://codepen.io/nvision/pen/lBKEy
.shadow {
display: inline-block;
position: relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
}
.shadow img {
max-width: 100%;
position: relative;
z-index: -1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
The problem is this light-grey padding between the bottom of the image and the actual inner shadow. What I'd like to have is no padding at all. Just an inner shadow, and that's it.
Here's an example of what I'm trying to achieve:
Add display: block to the img elements to remove the padding below. This is because img elements are rendered inline by default. All inline-block elements has some vertical-align value by default- reset it either by applying vertical-align: top or reset the display property by applying display: block. See demo below:
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.shadow {
display: inline-block;
position: relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
}
.shadow:hover {
-moz-box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
}
.shadow img {
max-width: 100%;
position: relative;
z-index: -1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: block; /* ADDED */
}
.column {
float: left;
width: 25%;
padding: 0 15px;
}
<div class="column">
<div class="shadow">
<img src="http://fillmurray.com/250/250">
</div>
</div>
<div class="column">
<div class="shadow">
<img src="http://fillmurray.com/370/370">
</div>
</div>
<div class="column">
<div class="shadow">
<img src="http://fillmurray.com/200/200">
</div>
</div>
<div class="column">
<div class="shadow">
<img src="http://fillmurray.com/400/400">
</div>
</div>
I'm trying to build simple pricing table using bootstrap 4 card element, but i can't find solution to one problem.
.card {
border: 0;
border-radius: 0px;
-webkit-box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
transition: all .3s ease-in-out;
padding: 2.25rem 0;
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
border: 3px solid $primary-color;
transition: 0.5s;
}
&:hover {
transform: scale(1.05);
-webkit-box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
&:after {
border: 3px solid $primary-color;
width: 100%;
}
Live Codepen
This is code responsible for drawing line in top part of the tables on the hover. The problem is i have no idea how to hide this small green rectangle in the left top corner of each table. I was trying to make border white and change to green once customer hover table. It works, but then fade effect is visible. I would prefer to keep it as it's now, just somehow get rid of this rectangle.
Remove border from :after and add height: 3px instead, also remove border from :after on :hover
.card {
border: 0;
border-radius: 0px;
-webkit-box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
transition: all .3s ease-in-out;
padding: 2.25rem 0;
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: $primary-color;
transition: 0.5s;
}
&:hover {
transform: scale(1.05);
-webkit-box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
&:after {
width: 100%;
}
I'm trying to make a line that almost looks like it has serifs at the ends. Essentially, I want to make it wider at the very ends and thin in the middle, just using css. This has actually proven to be quite a challenge.
Any help would be appreciated.
Thus far I've been able to get the bottom to look how I want using the :after pseudo selector, but no luck with the top, which I can only seem to get concave, rather than convex.
Here's the code of what I've done so far
.line {
background:none;
height: 8px;
position:relative;
overflow:hidden;
z-index:1;
top: 50px;
left: 50px;
width: 140px;
box-shadow: 11px 12px 16px -3px rgba(0,0,0,0.6);
-webkit-transform: rotate(38deg);
transform: rotate(38deg);
}
.line:after {
content: '';
position: absolute;
left: 0%;
width: 100%;
padding-bottom: 10%;
top: 50%;
border-radius: 35%;
box-shadow: 0px 0px 0px 150px rgba(0,0,0,0.6);
z-index: -1;
}
.line:before {
content: '';
position: absolute;
left: 0%;
width: 100%;
padding-bottom: 8%;
top: -30%;
border-radius: 35%;
box-shadow: 0px 0px 0px 150px rgba(255,255,255, 1);
z-index: 24 !important;
}
and the HTML
<section class="stage">
<figure class="line"></figure>
</section>
Here's the fiddle of what I have thus far (also, I'm gonna need to rotate it for certain areas)
http://jsfiddle.net/speo9bfv/1/
Thanks for the help!
If you have a plain background color, you can do this with pseudo elements :
DEMO
HTML :
<section class="stage">
<figure class="line"></figure>
</section>
CSS :
.line {
height: 8px;
position:relative;
overflow:hidden;
z-index:1;
top: 50px;
left: 50px;
width: 140px;
-webkit-transform: rotate(38deg);
transform: rotate(38deg);
background:rgba(0,0,0,0.6);
}
.line:after, .line:before {
content:'';
position: absolute;
left:0;
width:100%;
height:100%;
border-radius: 35%;
background:#fff;
}
.line:after{
top:5px;
}
.line:before{
bottom:5px;
}
I would try using gradients to create the illusion of a pinched line.
black -> white -> black
black line
black -> white -> black
I wanted this to just be a comment, but I couldn't make new lines like I wanted.
Here's a fiddle for you:
http://jsfiddle.net/qaqafc6f/
Here is a better one, with rotate applied.
http://jsfiddle.net/qaqafc6f/2/
Note this does not use :before or :after, and is probably more cross-browser compatible (as long as you add the vendor prefixes).
If you need a transparency around this shape you could use two pseudo elements with a curved border-radius and multiple box-shadows to colour in the space between them:
.line {
height: 8px;
position:relative;
overflow:hidden;
z-index:1;
top: 50px;
left: 50px;
width: 140px;
-webkit-transform: rotate(38deg);
transform: rotate(38deg);
}
.line:after, .line:before {
content:'';
position: absolute;
left:-10px;
right:-10px;
height:100%;
border-radius: 50%;
background:transparent;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .5), 5px 0 0px 2px rgba(0, 0, 0, .5), -5px 0 0px 2px rgba(0, 0, 0, .5), 10px 0 0px 2px rgba(0, 0, 0, .5), -10px 0 0px 2px rgba(0, 0, 0, .5), 15px 0 0px 2px rgba(0, 0, 0, .5), -15px 0 1px 2px rgba(0, 0, 0, .5), 20px 0 0px 2px rgba(0, 0, 0, .5), -20px 0 0px 2px rgba(0, 0, 0, .5), 25px 0 0px 2px rgba(0, 0, 0, .5), -25px 0 0px 2px rgba(0, 0, 0, .5), 30px 0 1px 1px rgba(0, 0, 0, .5), -30px 0 1px 1px rgba(0, 0, 0, .5);
}
Or - if an inline svg datauri is acceptable - you could do something like:
.svg-stick {
margin-top:200px;
display:block;
width:140px;
height:8px;
background: transparent url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iM...etc...) center center no-repeat;
background-size:100% 100%;
-webkit-transform: rotate(38deg);
transform: rotate(38deg);
}
Both demoed here: http://jsfiddle.net/eqaL4g5q/