I want to make rounded cornes on this background images. But it seems to effect the div box instead.
<div class="watermark">
<div class="watermark-image" style="background-image:url({{blogthreadlist.blogUri}});"></div>
<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>
.watermark {
display: block;
position: relative;
}
.watermark-image {
content: "";
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
How do I round the cornes of the images and not the div box? The div i larger than the picture..
You can have a separate <img> tag for the image and set a border-radius
<div class="watermark-image"><img class="rounded-img" src="{{blogthreadlist.blogUri}}"></img></div>
CSS
.rounded-img {
border-radius: 3px;
}
Rounded Corner for image, try this Demo
<div class="watermark-image" style="background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNbB93-oZdCcp-OwO5m05v07sAJe42lOpOy8dRnT3aZ8uArqZJ);background-repeat: repeat-x;border-radius: 5px;"></div>
Use this
.watermark-image {
content: "";
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
border-radius:50px;
}
Related
I am trying to change the position of both images (image and image hover change) to elsewhere on my site. However when I edit the positions code one image moves and the other stays. Any help greatly appreciated
.figure {
position: relative;
/* can be omitted for a regular non-lazy image */
width: 300;
height: auto;
}
.figure img.image-hover {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
object-fit: contain;
opacity: 0;
transition: opacity .2s;
}
.figure:hover img.image-hover {
opacity: 1;
}
<div class="figure">
<img class="Sirv image-main sirv-image-loaded sirv-image-loading" src="https://freight.cargo.site/t/original/i/4867b4e577f4d455e8e84acf0935e4fb0f6367d4edd5d45a15dc4035c95187fc/war-on-bacteria.png" data-src="https://freight.cargo.site/t/original/i/4867b4e577f4d455e8e84acf0935e4fb0f6367d4edd5d45a15dc4035c95187fc/war-on-bacteria.png" referrerpolicy="no-referrer-when-downgrade" id="responsive-image-4609053" style="width: 30%;" alt="Bose 700 headphones, front">
<img class="Sirv image-hover sirv-image-loaded sirv-image-loading" data-src="https://freight.cargo.site/t/original/i/30c4299c88a8aba512919f8e9d7607340223ea4f4bb0032c8bb42fb622fac9d2/Screenshot-2022-04-27-at-13.18.43.png" referrerpolicy="no-referrer-when-downgrade" id="responsive-image-9283795" src="https://freight.cargo.site/t/original/i/30c4299c88a8aba512919f8e9d7607340223ea4f4bb0032c8bb42fb622fac9d2/Screenshot-2022-04-27-at-13.18.43.png" style="width: 30%;">
</div>
Just use absolute positioning on the parent element.
.figure {
position: absolute;
top:100px;
left:300px;
}
You do not need to change the position on the img as it is already positioned relative to its container.
put images in same container.
.figure {
position: relative;
height: auto;
}
.figure img{
position: absolute;
/* change position for both images*/
top: 20px;
right: 0;
left: 0;
bottom: 0;
object-fit: contain;
transition: opacity .2s;
}
.figure:hover img.image-hover {
z-index: 1;
}
<div class="figure">
<a href="Revenge-of-the-Bacteria" class="image-link" rel="history"><img class="Sirv image-hover sirv-image-loaded sirv-image-loading" data-src="https://freight.cargo.site/t/original/i/30c4299c88a8aba512919f8e9d7607340223ea4f4bb0032c8bb42fb622fac9d2/Screenshot-2022-04-27-at-13.18.43.png" referrerpolicy="no-referrer-when-downgrade" id="responsive-image-9283795" src="https://freight.cargo.site/t/original/i/30c4299c88a8aba512919f8e9d7607340223ea4f4bb0032c8bb42fb622fac9d2/Screenshot-2022-04-27-at-13.18.43.png" style="width: 30%;">
<img class="Sirv image-main sirv-image-loaded sirv-image-loading" src="https://freight.cargo.site/t/original/i/4867b4e577f4d455e8e84acf0935e4fb0f6367d4edd5d45a15dc4035c95187fc/war-on-bacteria.png" data-src="https://freight.cargo.site/t/original/i/4867b4e577f4d455e8e84acf0935e4fb0f6367d4edd5d45a15dc4035c95187fc/war-on-bacteria.png" referrerpolicy="no-referrer-when-downgrade" id="responsive-image-4609053" style="width: 30%;" alt="Bose 700 headphones, front"></a>
</div>
For a school project I'm designing a website and I'm trying to incorporate an animated logo into the website, but I can't get all the components to display properly. You can view the live website here: http://students.washington.edu/torinw/anxiety/
<div id="logo">
<div id="left">
<div class="circle"></div>
<div class="tail"></div>
<div class="dot"></div>
<div class="clip"></div>
</div>
<div id="right">
<div class="circle"></div>
<div class="tail"></div>
<div class="dot"></div>
<div class="clip"></div>
</div>
<div id="top">
<div class="circle"></div>
<div class="tail"></div>
<div class="alpha"></div>
<div class="dot"></div>
<div class="clip"></div>
</div>
<div id="bottom">
<div class="circle"></div>
<div class="tail"></div>
<div class="alpha"></div>
<div class="dot"></div>
<div class="clip"></div>
</div>
</div>
</div>
And CSS:
#logo {
height: var(--logo-size);
width: var(--logo-size);
top: 0;
bottom: 0;
margin: auto;
position: relative;
background: #1752a1;
}
#left, #right {
width: calc(var(--logo-size) / 2);
height: var(--logo-size);
margin-top: 0;
bottom: 0;
position: absolute;
border-bottom-left-radius: 50%;
overflow: hidden;
}
.circle {
position: absolute;
bottom: 50%;
left: 0;
border-top-left-radius: calc(var(--logo-size) / 4);
border-top-right-radius: calc(var(--logo-size) / 4);
background-color: rgba(0,0,0,.5);
height: calc(var(--logo-size) / 4);
width: calc(var(--logo-size) / 2);
z-index: 3;
}
.dot, .alpha {
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 10%;
width: 20%;
margin: auto;
background-color: white;
border-radius: 50%;
position: absolute;
z-index: 4;
}
.alpha {
background-color: rgba(0,0,0,.5);
z-index: 5;
}
.tail {
position: absolute;
bottom: 0;
border-bottom-left-radius: 100%;
background-color: rgba(0,0,0,.5);
height: calc(var(--logo-size) / 2);
width: calc(var(--logo-size) / 2);
overflow: hidden;
z-index: 1;
}
.clip {
position: absolute;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
background-color: #1752a1;
bottom: 0;
left: 50%;
width: calc(var(--logo-size) / 2);
height: calc(var(--logo-size) / 2);
z-index: 2;
}
#right {
left: 50%;
position: relative;
transform: rotate(180deg);
}
#top, #bottom {
display: inline;
width: calc(var(--logo-size) / 2);
height: var(--logo-size);
left: calc(var(--logo-size) / 4);
bottom: calc(var(--logo-size) / 4);
position: absolute;
overflow: hidden;
transform: rotate(90deg);
}
#bottom {
transform: rotate(270deg);
top: calc(var(--logo-size) / 4);
}
#top .circle, #top .tail, #bottom .circle, #bottom .tail {
background-color: white;
}
#top .dot, #top .clip, #bottom .dot, #bottom .clip {
position: absolute;
background-color: #1752a1;
}
You'll see I have it broken into 4 segments, and each segment has the same 4 or 5 divs for the parts of the pseudo yin-yang logo I made: a half circle, a dot and/or alpha channel (for coloring purposes, as I plan on adding the ability to change themes), a tail quarter circle, and a 'clip' div that matches the background and completes the arched tail shape for when I get to animating it. I have the z-indexes set as the following, in order of increasing indexes: tail, clip, circle, dot, alpha. This way the clip covers up the tail, another div's circle overlaps the other's clip, etc.
The left, right, and top divs seem to display exactly how I intend them to, with the layers overlapping properly inbetween divs. But for some reason the bottom div doesn't follow by the same rules. Its half circle and dot is being covered but by both the left's tail and clip divs, and the bottom's clip div is covering up the right's circle and dot divs.
Why is it behaving this way? Is there something about the way I'm trying to code the logo that simply doesn't work? If you have a suggestion for an alternative way of going about it I'd be open to the idea as well.
I'm trying to have an image with an overlay and some text over it. The overlay I have works fine, but the text is also fading which I don't want. I'd like the text to stay the same. here is some of my code
html:
<div class="hero">
<div class="overlay">
<div class="header">
<h1 class="overlay-text"</h1>
<p class="text-center overlay-text">SOME CONTENT HERE</p>
</div>
</div>
</div>
css:
.hero {
background-image: url('http://localhost:3000/3b1425242c422b429f78f272b0a4c0f7.jpg');
background-size: cover;
position: relative;
display: block;
min-height: 101vh;
color: white;
}
.hero:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.2);
}
.overlay-text {
z-index: 200;
}
.overlay-text:after {
z-index: 200;
}
.overlay text was just something I tried, it doesn't do anything.
Here is a little example: https://jsfiddle.net/zydkz1ed/1/
You just need to make .overlay-text absolute or relative in order for z-index to works:
.overlay-text {
position: absolute;
z-index: 200;
}
Also the h1 tag wasn't quite right, it should be: <h1 class="overlay-text"></h1>. There was a missing > sign.
I have two divs that have an opacity less than 1. When hovering I would like to increase the opacity to 1 but can't seem to get it to work. Not sure if it is because of the z-index I have in the css. I need the z-index to prevent the whole div having reduced opacity.
This is the html
<section class="events">
<div class="events-wrapper">
<h2>Select the session you would like to attend for more information</h2>
<div class="melbourne-left">
<div class="melbourne-left-background">
<h1>Melbourne</h1>
<h3>Sunday Jan 21st 2015</h3>
</div>
</div>
<div class="sydney-right">
<div class="sydney-right-background">
<h1>Sydney</h1>
<h3>Sunday Feb 1st 2015</h3>
</div>
</div>
</div>
</section>
And this is the css for the 'melbourne' divs
.melbourne-left {
display: block;
float: left;
width: 44%;
clear: both;
margin-left: 5%
}
.melbourne-left-background {
position: relative;
z-index: 1;
min-height: 420px;
}
.melbourne-left-background::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(http://melbourne.jpg) center center;
opacity: .4;
width: 100%;
max-width: 855px;
background-repeat: no-repeat;
}
.melbourne-left-background:hover {
opacity: 1.0;
}
You are setting the opacity on the :before psuedo element of .melbourne-left-background, however you are detecting the :hover state and changing opacity for the DOM element and not the psuedo.
As such, change:
.melbourne-left-background:hover {
opacity: 1.0;
}
To
.melbourne-left-background:hover::before {
opacity: 1.0;
}
I have a progress bar that needs to be on top of an overlay, here is the broken jsfiddle
Markup:
<div class="overlay mouse-events-off">
<div class="progress progress-striped active">
<div class="bar" style="width: 40%;"></div>
</div>
</div>
CSS:
.overlay { background-color: black; position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.2; /* also -moz-opacity, etc. */ z-index: 100; }
.progress { position: absolute; top: 50%; left: 35%; width:300px; height:20px; z-index:101; opacity:1.0; }
The progress bar is also at 20% opacity.
I have a fix by just placing the <div> that carries the progress bar outside of the overlay it works. But seems like extra mark-up
Working Markup:
<div id="progress" style="display:none;">
<div class="progress progress-striped active glow">
<div class="bar" style="width: 40%;"></div>
</div>
<div class="overlay mouse-events-off"></div>
</div>
Is there a more elegant way to solve this with just CSS?
When you use opacity, everything inside that element will be affected too, no workarounds.
You have two ways of doing this:
Progress Outside
Put progress outside overlay and play with it to be centered on top of overlay.
.progress {
position: absolute;
top: 50%;
left: 50%;
width:300px;
height:20px;
margin:-10px 0 0 -150px; //half width left, half height top
z-index:101;
opacity:1.0;
}
Keeping as is
Instead of using opacity on the element itself, use on the background instead!
.overlay {
background-color: black; /*older browsers*/
background-color: rgba(0,0,0,.2); /*new ones will overwrite the 'black' declaration with rgba*/
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*opacity:0.2; no opacity!*/
z-index: 100;
}
Here's the jsFiddle for the second one:
http://jsfiddle.net/Qpv4E/2/
Here's the same question: I do not want to inherit the child opacity from the parent in CSS
Hopefully the answers with RaphaelDDL's will help.