I want to add some pizzazz to some banners... my banners are simply an h1 element with a background color property that stretches the legth of the containing element.
Here is my CSS:
.banner {
position: relative;
z-index: 1000;
padding: 20px;
}
.banner-blue {
background-color: #93DEFF;
color: #222222;
}
.banner-yellow {
background-color: #FFF072;
color: #777777;
}
.banner-red {
background-color: #FF356B;
color: white;
}
And I would apply it like this:
<h1 class="banner banner-yellow">I'm a banner!</h1>
My problem:
I want to overlay a copy of the banner background but change the color and rotate it slightly on the z-axis to get an effect like this.
However I can't work out how to do that using the ::before (or is it ::after) psuedo-elements to do that... here is what I have tried:
.banner-red::before {
display: block;
position: absolute;
padding: 20px;
content: "";
background-color: rgba(255,30,60,0.4);
transform: rotateZ(3deg);
width: 100%;
margin-left: -30px;
}
Here is a codepen of it running: not looking too good: https://codepen.io/jethazelhurst/pen/JyKqRB
Just rotate your box in the opposite direction: transform: rotateZ(-3deg);
You can set the top and left value in order to place your rotated box correctly.
.banner-red::before {
display: block;
position: absolute;
content: "";
background-color: rgba(255,30,60,0.4);
transform: rotateZ(-3deg);
width: 102%;
height: 97px;
margin-left: -30px;
top: 2px;
}
Of course you can change the colors: your horizontal box is #91c6ff and the rotated one is #91c6ff. Also, they are transparent.
Here's a fork of your project: https://codepen.io/anon/pen/zdBVGe
And with the colors:
Make a element with another child element for text, span for example. Then you can set z-index on span so that text is above pseudo element.
div {
background: #91C6FF;
padding: 25px;
margin: 40px;
position: relative;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(135, 171, 255, 0.7);
transform: rotate(-4deg);
}
span {
position: relative;
z-index: 2;
font-size: 30px;
}
<div><span>Lorem ipsum dolor.</span></div>
Related
Here is the situation:
I am using the following CSS to darken a cover-image, so I can write a headline on it. The button-style however doesn't apply when using it within the ::before container.
HTML
<main class="zimmer-cover-dark">
<div class="zimmer-cover-inside">
...
</div>
</main>
CSS
.zimmer-cover-dark {
position: relative;
height: 65em;
}
.zimmer-cover-dark::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(resources/img/7.jpeg);
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: brightness(35%);
}
.zimmer-cover-inside {
position: relative;
padding-top: 18em;
}
Now I want to add my button as follows:
HTML
<main class="zimmer-cover-dark">
<div class="zimmer-cover-inside">
<a href="">
<button type="button" class="custom-btn-open">
Book Now
</button>
</a>
</div>
</main>
CSS
button {
font-weight: 400;
border: solid 2px #585858;
outline: 0;
padding: 1rem 4rem;
font-size: 1.25rem;
letter-spacing: 0.00rem;
background-color: white;
border-radius: 0.35rem;
position: relative;
cursor: pointer;
}
button::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #a9c7b1;
z-index: -1;
border-radius: 0.35rem;
border: solid 2px #919191;
transition: all 0.3s ease-in-out;
}
button.custom-btn-open::after {
top: 0.5rem;
left: 0.5rem;
}
The button sadly doesn't appear in the right format. It just stays white and not the intended style. Whenever I insert the button outside a ::before div, it works. So I wonder, how to I approach this situation, and is there a way I can use both pseudo-elements together?
sorry i did not read your code, my eyes got catch by the z-index -1 of your ::after, may it be the problem?
Codepen link: https://codepen.io/lolcatBH/pen/OJbgLyd
I have the following html:
<div id="page">
<div class="overlay"></div>
<div class="click">SHOW POPUP</div>
<div class="popup">
<h1>Korean language</h1>
<button class ="close">X</button>
<div class="desc">Korean (North Korean: 조선말/朝鮮말, chosŏnmal; South Korean: 한국어/韓國語, hangugeo) is an East Asian language spoken by about 77 million people.</div>
</div>
</div>
And CSS:
#page {
position: absolute;
top: 50%;
left: 25%;
}
.popup {
width: 300px;
height: 300px;
border: 1px solid black;
z-index: 1;
position: absolute;
top: -10%;
transform: scale(0);
padding: 20px;
}
#page .overlay {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.7);
z-index: 1;
display: none;
}
#page.active .overlay {
display: block;
}
.popup.active {
transform: scale(1);
background-color: white;
}
.close {
position: absolute;
right: 0%;
top: 0%;
color: white;
background: black;
border-radius: 50%;
}
.click {
border: 1px solid black;
padding: 20px;
font-size: 20px;
text-align: center;
z-index: 0;
cursor: pointer;
}
h1, desc {
text-align: center;
}
JS:
const click = document.querySelector('.click');
const x = document.querySelector('.close');
const page = document.querySelector('#page');
const popup = document.querySelector('.popup');
const showPopup = () => {
page.classList.toggle('active');
popup.classList.add('active');
}
const hidePopup = () => {
page.classList.toggle('active');
popup.classList.remove('active');
}
click.addEventListener('click', showPopup);
x.addEventListener('click', hidePopup);
At first, what I tried to do is instead of creating a separate overlay div, I was going to put a background color on the #page element. However, in effect, the background only applies to the button element (.click). I don't actually understand why in this case, since the background-color doesn't seem to affect the .popup element.
Imgur: https://imgur.com/a/UEgXSlY
So my question is, why does the #page element not cover all of its children's width and height? In this case, I thought it would have cover the whole page. I've also tried putting width: 100vw and height:100vh but it in turn only applied the dimensions to the button.
Imgur: https://imgur.com/a/QOMlnTs
The reason is that most of your elements have position set to absolute or fixed, which makes them completely (fixed) or partly (absolute) independent from their parent, i.e. there is no space of its own reserved for them, therefore they typically overlap other elements.
So the parent doesn't span or cover them, but only those elements which don't have a set position or which have position: relative or static.
I am having a question regarding the tooltip, the tooltip is hiding behind the table heading or it is displaying in one box it is not showing out.
Please, refer to the image where the tip is hiding behind the another div
(marketing shown in image is in the tip):
.tooltipCustom {
position: relative;
display: inline-block;
}
.tooltipCustom .tooltipCustomtext {
visibility: hidden;
width: 120px;
background-color: #efeee6;
color: #868474;
text-align: center;
border-radius: 6px;
padding: 5px 0;
border-width: 1px;
border-style: solid;
border-color: black;
/* Position the tooltip */
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltipCustom:hover .tooltipCustomtext {
visibility: visible;
}
<div class='tooltipCustom'>
<sup style="vertical-align: top">
Something
</sup>
<span class='tooltipCustomtext'>
Underlying price: List price <br/>
Applied Discounts: Marketing
</span>
</div>
Fix it
/* Position the tooltip */
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -60px;
For example
/* Position the tooltip */
position: absolute;
top: 20px;
left: 50%;
margin-left: 0;
I think that the div above has a z-index defined, you need to put a higher z-index value on your tooltip to be on the front of previous div:
.mypreviousDiv {
z-index: 100;
}
.tooltipCustom .tooltipCustomtext {
z-index: 101; // ou higher, for tooltips we can put 9999
}
I am trying to achieve something like this:
When I hover over an image, I would like to put on that image this dark color with some text and the icon.
I am stuck here. I found some tutorials but they didn't work out for this case.
Also, another issue -- every image has a different height. The width is always the same.
How can this effect be achieved?
You can achieve this with this simple CSS/HTML:
.image-container {
position: relative;
width: 200px;
height: 300px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
HTML
<div class="image-container">
<img src="http://lorempixel.com/300/200" />
<div class="after">This is some content</div>
</div>
Demo: http://jsfiddle.net/6Mt3Q/
UPD: Here is one nice final demo with some extra stylings.
.image-container {
position: relative;
display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
position: absolute;
bottom: 0;
font-family: Arial;
text-align: center;
width: 100%;
box-sizing: border-box;
padding: 5px;
}
.image-container .after .zoom {
color: #DDD;
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -19px;
height: 50px;
width: 45px;
cursor: pointer;
}
.image-container .after .zoom:hover {
color: #FFF;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
<img src="http://lorempixel.com/300/180" />
<div class="after">
<span class="content">This is some content. It can be long and span several lines.</span>
<span class="zoom">
<i class="fa fa-search"></i>
</span>
</div>
</div>
You could use a pseudo element for this, and have your image on a hover:
.image {
position: relative;
height: 300px;
width: 300px;
background: url(http://lorempixel.com/300/300);
}
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: all 0.8s;
opacity: 0;
background: url(http://lorempixel.com/300/200);
background-size: 100% 100%;
}
.image:hover:before {
opacity: 0.8;
}
<div class="image"></div>
Putting this answer here as it is the top result in Google.
If you want a quick and simple way:
filter: brightness(0.2);
*Not compatible with IE
A bit late for this, but this thread comes up in Google as a top result when searching for an overlay method.
You could simply use a background-blend-mode
.foo {
background-image: url(images/image1.png), url(images/image2.png);
background-color: violet;
background-blend-mode: screen multiply;
}
What this does is it takes the second image, and it blends it with the background colour by using the multiply blend mode, and then it blends the first image with the second image and the background colour by using the screen blend mode. There are 16 different blend modes that you could use to achieve any overlay.
multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.
.bg-img{
text-align: center;
padding: 130px 0px;
width: 100% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)), url(your-img-path);
}
I am trying to add a "plus sign" (its a .png file) to my portfolio section. My goal is to make this "plus sign" visible only when customers are hovering with mouse pointer over my projects but in the same time I want to keep the background-color property which I already set up.
However, my plus sign doesn't show up!? How can I do that???
On this website you can see the similar effect: http://bjorsberg.se/
Here is my JSFiddle: http://jsfiddle.net/L8HX7/
This is a part of my CSS (from JSFiddle) that needs to be fixed:
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
Here is example of a plus sign I want to add: http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Very-Basic-Plus-icon.png
Here is a really broken down example.
http://jsfiddle.net/sheriffderek/UVvWm/
CSS
.block {
position: relative; /* so the .plus knows what to be relative to */
display: block;
width: 10em;
height: 10em;
background-color: red;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
}
.block:hover .overlay {
background-color: rgba(0,0,0,.5);
}
.block .plus {
display: none;
}
.block:hover .plus {
display: block;
}
/* to position the .plus */
.plus {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
HTML
<a href="#"class="block">
<div class="overlay"></div>
<img class="plus" src="http://placehold.it/100x100" />
</a>
You could use an :after psuedo element for the overlay - but I wanted to keep it simple. Keep in mind that CSS declarations read from right to left .... "any .plus - do this, when .block:hover" etc ----
The style obviously has to be applied on hover.
Just replace the background-color in .projectshot a .over:hover{ by the appropriate background. You don’t need the div.plus at all, and neither do you need div.inner (you can remove those from the HTML!):
.projectshot a .over:hover{
position: absolute;
background: url(img/plus.png) center center no-repeat rgba(51, 51, 51, 0.6);
border-radius: 8px;
height: 150px;
width: 200px;
margin: 10px;
}
Here’s the updated Fiddle: http://jsfiddle.net/L8HX7/8/