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;
}
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'm planning to position some DIVs on top of a background image but it doesn't seem to work well. The positions of the DIVs changes when the screen size change. Media Query is not the solution. Any help?
HTML
<div class="div-bg" style="background-image:url('https://image.ibb.co/f1qio5/insights_indiamap.jpg')">
<div class="cities Delhi"></div>
<div class="cities Bangalore"></div>
</div>
CSS:
.div-bg {
height: 85vh;
min-height: 500px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
}
.cities {
border: 1px solid red;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}
.cities.Delhi {
position: absolute;
top: 150px;
left: 175px;
}
.cities.Bangalore {
position: absolute;
top: 250px;
left: 275px;
}
JSFIDDLE DEMO
if you set a fixed width to container
.div-bg{ width:700px;}
will fix your issue
The position of the red dots is not changing, the position of the background image inside of div-bg is what is changing. Inspect that div while resizing and you will see. One way to keep this from happening would be to give the div a fixed width and height. Check out update fiddle.
width: 500px;
.div-bg{
width:555px;
}
add this CSS to your code.
For the image dimensions, use vmin units, the will adapt gracefully to the viewport dimension.
And set the position of the cities in percentage
.div-bg {
height: 100vmin;
width: 100vmin;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
}
.cities {
border: 1px solid red;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}
.cities.Delhi {
position: absolute;
top: 27%;
left: 30%;
}
.cities.Bangalore {
position: absolute;
top: 85%;
left: 33%;
}
<div class="div-bg" style="background-image:url('https://image.ibb.co/f1qio5/insights_indiamap.jpg')">
<div class="cities Delhi"></div>
<div class="cities Bangalore"></div>
</div>
I need an image to be resized to fit in inside a div. This div must, necessarely, no matter what, be an position: absolute; div. Apart from the image have 100% from its greatest dimension, it should be centered in the other way.
I could resize to fit it, but can't center. I tried to make it inline and use vertical-align, but it didn't work.
Since code worth more than words, check my fiddle example.
This is the code from the jsfiddle:
CSS:
.relative {
width: 400px;
height: 400px;
position: relative;
<!-- Next is not important, only to display better -->
display: block;
background-color: green;
border: 3px solid yellow;
margin-bottom: 10px;
}
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
HTML:
<div class="relative">
<div class="absolute">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
</div>
</div>
<div class="relative">
<div class="absolute">
<img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
</div>
</div>
you may put the image to background instead of an img tag.
<div class="absolute">
<img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>
.absolute {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
however, if you can set a fixed height for the div, you can use this:
.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }
Only for semi-new browsers:
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Absolutely position all the things!
transform still needs browser prefixes I hear. -webkit- works for me.
http://jsfiddle.net/rudiedirkx/G9Z7U/1/
Maybe I did not understand the question…
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
line-height:350px; //new
}
img {
position:relative;
display:inline-block; // new
vertical-align:middle; // new
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
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>
Here is my html
<div class="container">
<img src="something" class="avatar"/>
<div class="edit_photo">Edit</div>
</div>
"edit_photo" has an image on it's background. the img tag dimensions is not set so it could be anything. But I want the "edit_photo" div to always be on the bottom right corner of the img. Is this possible with css? I can't think of a way to do this. the img tag needs to always be an img tag and I can't change it to a div.
Thank you!
I think this may be possible:
CSS:
.container{
position: relative;
display: inline-block;
}
img{
background: red;
height: 120px;
width: 250px;
}
.edit_photo{
position: absolute;
bottom: 0;
right: 0;
background: blue;
height: 25px;
width: 25px;
}
Here's a JSFiddle to see: http://jsfiddle.net/gW9PK/
You might need to play around with the .edit_photo and nudge it up a little bit.
The container should be position: relative; and the edit_photo position: absolute; like this:
.container {
position: relative;
/* inline-block for 100% of child width */
display: inline-block;
border: 3px solid #ddd;
}
img {
/* for 100% height of the container */
display: block;
}
.edit_photo {
position: absolute;
right: 5px;
bottom: 10px;
/* Some color */
background: red;
padding: 2px 4px;
border-radius: 3px;
color: white;
}
UPDATED DEMO WITH MULTIPLE IMAGES: http://jsfiddle.net/HYQLQ/3/
write this code in css
.container{
position: absolute;
}
.edit_photo{
position: absolute;
bottom:0px;
right:0px;
widht:20px;
height:20px;
}
edit_photo
{
bottom:-600
top:30px;
right:5px;
}
play with the numbers.