Im trying to make part of a div transparent so the transparent part can show the background pattern ( a complicated one made with css).
So i have a view_main div and 2 other small divs , divs that will be transparent and show the background
#View_main{
margin-left:7%;
top: 15%;
height:100%;
width:70%;
background-color:white;
position:relative;
border:0;
z-index:1;
}
the left_space div
#left_space{
height:12%;
width:12%;
background-color:transparent;
margin: auto;
position: absolute;
top: 0; left: -100%; bottom: 0; right: 0;
}
the right_space div
#right_space{
height:12%;
width:12%;
background-color:red;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: -100%;
}
i have tried to make the left_space with z-index=2 and the view_main z-index=1 and still nothing ,
Here is a simple example, i im trying to show the background (in this case is green but in my code is a pattern ,or image) from the left_space div
I have also tried the opacity but still nothing!
does someone have any idea?
here it is a visual rapresentation
Here's code for creating blue shape using before and after pseudo-classes
body {
background-color: green;
}
.container {
margin: 50px auto;
height: 300px;
width: 210px;
background-color: blue;
position: relative;
}
.container:before, .container:after {
content: "";
height: 44%;
position: absolute;
background-color: blue;
z-index: -1;
width: 112%;
left: -6%;
}
.container:before {
top: 0;
}
.container:after {
bottom: 0;
}
DEMO
Use opacity property in the div that you want to make transparent and set its value from 0.1 to 1
Reference Link on w3cschools
From your above diagram and link to code provide by you
I modified your code to get that structure:
<!DOCTYPE html>
<html>
<style>
body{
background-color:green;
}
#View_main{
margin-left:7%;
top: 15%;
height:300px;
width:210px;
background-color:blue;
position:relative;
border:0;
}
#left_space{
height:12%;
width:12%;
background-color:green;
margin: auto;
position: absolute;
top: 0; left: -88%; bottom: 0; right: 0;
opacity:1;
}
</style>
<body>
<body><div id="View_main">
<div id="left_space"></div>
</div>
</body>
</body>
</html>
I can refer you,
That the #right_space you can give green color
http://jsfiddle.net/5BZdF/3/
Check this
You can use a transparent box with a large box-shadow drawn with :before or :after pseudo elements.
HTML:
<div id="View_main"></div>
CSS:
#View_main {
position:relative;
overflow: hidden;
height:300px;
width:210px;
}
#View_main:before {
box-shadow: 0 0 0 1000px blue;
position: absolute;
margin-top: -40px;
content: '';
height: 80px; /* Change width and height to increase or decrease transparent box area */
width: 20px;
opacity: 1;
top: 50%;
left: 0;
}
body{
background-color:green;
}
#View_main {
position:relative;
overflow: hidden;
margin-left:7%;
height:300px;
width:210px;
border:0;
top: 15%;
}
#View_main:before {
box-shadow: 0 0 0 1000px blue;
position: absolute;
margin-top: -40px;
content: '';
height: 80px;
width: 20px;
opacity: 1;
top: 50%;
left: 0;
}
<body>
<div id="View_main"></div>
</body>
Related
I am trying to add background color beyond the container in CSS.
But the problem I am facing is: it overlaps the container and I am unable to show background before the container.
HTML code is here
<div class="container">Some content here </div>
And CSS code
.container { padding: 15px; background-color: #eee;
/* For centering the container */
margin: 0 auto; }
/* CSS for background before the container */
.container::before { content: "";
background-color: red;
width: 300%;
height: auto;
left: -100%;
top: 0;
position: absolute;
z-index: -1;
}
Please let me know what mistake I am doing.
You are missing the height on the :before so the background is not visible:
.container {
padding: 15px;
background-color: #eee;
margin: 0 auto;
margin:50px;
}
.container:before { content: "";
background-color: red;
width: 300%;
height: auto;
left: -100%;
top: 0;
position: absolute;
height:50px;
}
<div class="container">Some content here</div>
I've created a triangle overlay over an image using borders.
HTML and CSS
.hp-product-item {
position: relative;
}
.hp-product-item img {
max-width: 500px;
width: 100%;
}
.hero-overlay {
position: absolute;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 120px 0 0 500px;
border-color: transparent transparent transparent #F9FAFB;
}
.hero-text {
position: absolute;
bottom: 10px;
left: 10px;
}
<div class="hp-product-item">
<img src="https://images.unsplash.com/photo-1516703914899-e8303d01329a?ixlib=rb-0.3.5&s=9ebf86cdab3a1c7319ff15b16d09b1f7&auto=format&fit=crop&w=1350&q=80">
<div class="hp-product-text">
<div class="hero-overlay"></div>
<div class="hero-text">
<h2>Test</h2>
<p>Testing this</p>
</div>
</div>
</div>
This works great, my only problem is responsiveness. So as the image gets smaller due to the 100% width the border becomes too big it overlaps and causes the layout to break. Now I could change the border-width with media queries but is there a better way to do this?
I've also created a fiddle
Use vw and vh instead of px so the units are relative to viewport size.
Just short example fiddle
You can use linear gradients instead of border that property supports percentage units, you will have to move outside your overlay... just like the example
FIDDLE
.hp-product-item {
position: relative;
display: inline-block;
}
.hp-product-item img {
max-width:500px;
width:100%;
}
.hero-overlay{
position:absolute;
bottom:0;
width: 100%;
height: 100%;
background: linear-gradient(19deg, #ffffff 25%, rgba(0,0,0,0) 25%);
}
.hero-text {
position: absolute;
bottom:10px;
left:10px;
}
Maybe you can try to set white background and to rotate class .hero-overlay?
Fiddle example
.hp-product-item {
max-width: 500px;
overflow: hidden;
position: relative;
}
.hp-product-item img {
width:100%;
}
.hero-overlay {
background-color: #f9fafb;
bottom: -230px;
height: 250px;
left: -100px;
position: absolute;
transform: rotate(15deg);
width: 1000px;
}
.hero-text {
position: absolute;
bottom:10px;
left:10px;
}
I'm trying to make an image that overflows on it its parent div, but that's centered according to its parent.
Heres how I'd like it to look:
This is the code I currently have but obviously doesn't work,
.wrapper{
height:150px;
width:150px;
position:relative;
background:red;
margin:5em auto;
}
.image{
width:175%;
height:auto;
position:absolute;
}
body{
background:purple;
}
<div class="wrapper">
<img class="image" src="https://pngimg.com/uploads/goat/goat_PNG13151.png">
</div>
JSFiddle
Fiddle
I want to achieve this in pure css, no use of javascript.
You can center your image with the "negative translate" trick.
Here's a working example:
.wrapper {
height: 150px;
width: 150px;
position: relative;
background: red;
margin: 5em auto;
}
.image {
width: 175%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background: purple;
}
<div class="wrapper">
<img class="image" src="https://pngimg.com/uploads/goat/goat_PNG13151.png">
</div>
Based on this question.
.wrapper{
height:150px;
width:150px;
position:relative;
background:red;
margin:5em auto;
}
.image{
width:175%;
height:auto;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
body{
background:purple;
}
Try this:
.image{
width:175%;
height:auto;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
It should center your <img> no matter the size of the parent div
Oh looks like I'm late to this party, but I was going to suggest this technique - using the ::after pseudo element to draw your square underlay and don't actually make the image overflow the wrapper div.
https://codepen.io/hamzatayeb/pen/QMxJvw
<div class="wrapper">
<img class="image" src="http://pngimg.com/uploads/goat/goat_PNG13151.png">
</div>
Then this CSS -
.wrapper {
width: 262px;
height: 262px;
position: relative;
margin: 5em auto;
}
.wrapper::after {
content: "";
background: red;
position: absolute;
top: 16%; right: 16%; bottom: 16%; left: 16%;
z-index: -1;
}
.image {
padding-top: 25px;
width: 100%;
height: auto;
}
body {
background: purple;
}
Try this add this style only to your image
.image{
width:175%;
height:auto;
position:absolute;
top: -18px;
right: -65px;
}
JS Fiddle
So I was playing around with some CSS, and wanted to give my titles a specific style. What I was thinking about was something like the image I made here:
I tried to google for people who wanted the same, but I couldn't really find what I was looking for.
This is what I have so far:
.test {
position: relative;
font-size:40px;
height:40px;
width:400px;
}
.test>span {
display: block;
overflow: hidden;
position: absolute;
left: 0;
width: 100%;
height: 60%;
color: #31FF5A;
}
.test>.top{
z-index:2;
top:0;
}
.test>.bottom{
color: black;
height: 100%;
z-index:1;
bottom: 0;
}
<div class="test">
<span class="top">TEXT</span>
<span class="bottom">TEXT</span>
</div>
Any one of you who can help me out? Or atleast in the right direction :P
Thanks!
Use border radius property.
.test {
position: relative;
font-size:40px;
height:40px;
width:400px;
}
.test>span {
display: block;
overflow: hidden;
position: absolute;
left: 0;
width: 100%;
/* height: 60%; */
color: #31FF5A;
border-bottom-left-radius: 90%;
}
.test>.top{
z-index:2;
top:0;
}
.test>.bottom {
color: black;
height: 100%;
z-index: 1;
bottom: 0;
border-bottom-right-radius: 346%;
}
<div class="test">
<span class="top">TEXT</span>
<span class="bottom">TEXT</span>
</div>
So my goal here is to create 5 rectangles next to each other that are centered left, right, up, and down no matter how you re-size the browser.
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5"></div>
</body>
#test1 {
background-color:blue;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
float:left;
}
#test2 {
background-color:black;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 25%;
float:left;
}
#test3 {
background-color:gray;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 25%; bottom: 0; right: 0;
float:left;
}
#test4 {
background-color:yellow;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 50%; bottom: 0; right: 0;
float:left;
}
#test5{
background-color:orange;
width:200px;
height:40px;
margin:auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 50%;
float:left;
}
This is the code I have so far and it almost works. But the rectangles start to overlap at a certain browser window width. I thought it would work to change the width to a percentage on each rectangle but if they are all at the same percentage they are just sitting on top of each other. Thanks in advance hopes someone can help me understand this a bit more.
What it looks like with maximized browser
What I wand to avoid when the browser gets too small
Here is a fiddle demonstrating my solution. Basically, I added a container for your boxes, centered that, and then set the boxes to 20% of the container's width.
The HTML:
<body>
<div id="container">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5"></div>
</div>
</body>
The CSS:
#container{
width: 80%;
position:fixed;
top:45%;
left:10%;
padding: 0;
height: 40px;
}
#test1 {
background-color:blue;
width:20%;
height:40px;
margin:auto;
float:left;
}
#test2 {
background-color:black;
width:20%;
height:40px;
margin:auto;
float:left;
}
#test3 {
background-color:gray;
width:20%;
height:40px;
margin:auto;
float:left;
}
#test4 {
background-color:yellow;
width:20%;
height:40px;
margin:auto;
float:left;
}
#test5{
background-color:orange;
width:20%;
height:40px;
margin:auto;
float:left;
}
Let me start with the working fiddle, explanation below:
First, wrap your divs in a main div, and to make things simple, I gave all the child divs a common class:
<div id="main">
<div class = "box" id = "test1">
</div>
<div class = "box" id = "test2">
</div>
<div class = "box" id = "test3">
</div>
<div class = "box" id = "test4">
</div>
<div class = "box" id = "test5">
</div>
</div>
Now we need the main div to do two things, first, be 100% wide, second, have the same height as width, so we add the following css:
#main {
width: 100%;
position: relative; /* for absolutely positioned children */
}
#main:before {
content: "";
display: block;
padding-top: 100%; /* 1:1 ratio */
}
Then we give the common style to the boxes:
.box {
width: 33%;
height: 33%;
position: absolute;
margin: auto;
}
Now we set up the child elements (I might have changes the colors, oops)
#test1{
background-color: blue;
left: 0;
right: 0;
top: 0;
}
#test2{
background-color: black;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#test3{
background-color: green;
left: 0;
right: 0;
bottom: 0;
}
#test4{
background-color: red;
left: 0;
top: 0;
bottom: 0;
}
#test5{
background-color: purple;
right: 0;
top: 0;
bottom: 0;
}
And there you go, have fun.