I have an image with a background overlay that needs to respond to screen devices.
The bg overly needs to remain full width but putting 100% width just creates an overflow on small devices and underflow on larger ones.
Appreciate the help.
Please see my js fiddle
.col-md-3{
width:30%;
}
img{
width:100%;
}
.brand-category{
position: relative;
}
.brand-text{
position: absolute;
background-color: rgba(130,130,130,0.5);
font-weight: 100;
font-size: 0.9em;
color: #fff;
text-align: center;
bottom: -10px;
padding: 5px;
}
Paddings cousing overflow
<div class="col-md-3 brand-category">
<p class="brand-text"><span>Category</span></p>
<img src="http://paulobriendesign.com/img/paul-obrien.jpg" class="img-responsive" alt="">
</div>
css
.col-md-3{
width:30%;
}
img{
width:100%;
}
.brand-category{
position: relative;
}
.brand-text{
position: absolute;
width: 100%;
background-color: rgba(130,130,130,0.5);
font-weight: 100;
font-size: 0.9em;
color: #fff;
text-align: center;
bottom: -10px;
}
.brand-text span {
display: block;
margin: 5px;
}
http://jsfiddle.net/XWfN4/
Simply add display:block; to your img CSS
img{
width:100%;
display:block;
}
Demo Without
Demo With
Related
I want the text to shrink as the image shrinks. e.g. maintain the same ratio in size relative to the image. I've tried making the text disappear but it simply isn't what I want.
The CSS:
.header{
padding: 0.16px 16px;
position: relative;
box-sizing: inherit;
display: block;
font-size: 15px;
line-height: 1.5;
text-size-adjust: 100%;
content: "";
display: table;
clear: both;
font-family: "Montserrat", sans-serif;
}
.top-left{
padding: 24px 48px;
margin-left: 16%;
position: absolute;
left: 0px;
top: 0px;
box-sizing: inherit;
display:block;
font-size: 15px;
line-height: 22.5px;
text-size-adjust:100%;
}
.header-image{
vertical-align:middle;
border-style: none;
box-sizing: border-box;
width:65%;
height:auto;
margin:30px 250px;
}
#media screen and (max-width: 600px) {
.header-image {
margin-left: auto;
margin-right: auto;
display: block;
width:65%;
}
}
.new-arrivals{
position: absolute;
display:block;
left: 0;
top: 0;
margin:10px 5px 10px 0;
font-size: 4vw !important;
color:black;
padding: 50px 100px;
font-weight: 400;
line-height: 60px;
}
.shop-now{
border:none;
display:inline-block;
padding:12px 24px;
margin: 260px 50px;
vertical-align:middle;
overflow:hidden;
text-decoration:none;
color:white;
background-color:black;
text-align:center;
white-space: nowrap;
font-size: 18px
}
.shop-now:hover{
background-color: #ccc;
color: black;
border-style: ridge;
border-color: black;
border-width: 1px;
}
.designs{
position: absolute;
left: 0;
top: 0;
font-size: 20px !important;
font-family: "Montserrat", sans-serif;
margin: 150px 0;
color:black;
padding: 24px 100px;
font-weight: 400;
}
The HTML:
<div class="header">
<img class="header-image" src="img/jeans.jpg" alt="Jeans">
<div class="top-left">
<h1 class="new-arrivals">New arrivals</h1>
<p><h3 class="designs">Our new season collection is here</h3> </p>
<p>SHOP NOW</p>
</div>
</div>
If you want the text to be responsive as the image, you need to set h1 element style in your CSS file. For example:
.new-arrivals {
font-size:clamp(2em, 4vw, 4em); /* set min, ideal value, max */
}
I was trying to do the same thing for my portfolio. And I end up putting my text imbedded inside the image by using the ms paints. The text inside image can't be responsive if it's not of part of image. I hope that help.
You can accomplish this by setting both the width of the image and the font-size based on the width of the screen. Below is an example of that.
This question is similar, and the answers there may be helpful to you as well.
body {
margin: 0;
}
.container {
position: relative;
color: white;
width: fit-content;
}
.top-left {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 3vw;
}
img {
width: 100vw;
}
<div class="container">
<img src="https://html.com/wp-content/uploads/flamingo.jpg">
<div class="top-left">
<h1 class="new-arrivals">New arrivals</h1>
<h3 class="designs">Our new season collection is here</h3>
<p>SHOP NOW</p>
</div>
</div>
If you don't need the image to scale with the screen width, you can simply set a fixed pixel size for both the image and the text.
CSS for the Text:
.text {
font-size: 15vw;
}
CSS for the Image
img {
width: 10vw;
max-width: /* Set this to 10-15cm if you want to show you page on
mobiles too */
min-width: /* Set this to 8-10cm if you want to show you page on
mobiles too */
}
try these and adjust
font-size: clamp(1rem, 3vw, 2rem)
font-size: max(1rem, 3vw)
font-size: calc(200% + 2vw)
I have 3 images in a div placed horizontally. When I resize the page the images changes their position and float in a vertical alignment.I want the page responsive and when i resize the page i want that the whole div is adapted and resized. I need also to put in the page others div with others images. I want the images align in the bottom side.Sameone help me please?
This is the code example.
.box{
display: inline-block;
position: relative;
bottom:100%;
width: 100%;
margin: 5% 5% 0 0;
font-size: 12px;
}
.box:before{
content: "";
display: block;
padding-top: 100%;
}
img {
max-width:100%;
height:auto;
border:1px solid black;
text-align:center;
}
.content{
/* Positioning */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* Styling */
border:1px solid;
padding: 30px;
text-align: center;
vertical-align: center;
text-transform: uppercase;
color: #fff;
}
<div class="box">
<div class="content">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
</div>
</div>
strong text
Just add this to the img:
See fiddle https://jsfiddle.net/16q2xr8k/27/
img {
width: calc((100% / 3) - 2px);
height: auto;
border: 1px solid black;
text-align: center;
}
Trying to keep this div full of text in the center of the page, behind an image that fades out. I have everything worked out except for the centering of the text div. I tried doing margin-left: auto;margin-right: auto, but to no avail. Am I doing something wrong?
And I'm testing the results in Chrome as I go, if that makes a difference.
HTML
<div class="content">
<div class="info">
<p class="title">is this like, something i don't know</p>
<p> </p>
<p class="size">90 x 145 cm</p>
<p> </p>
<p class="year">2012</p>
</div>
<img class="work" src="029.jpg"/>
</div>
CSS
.work {
display: block;
margin-left: auto;
margin-right: auto;
}
img.work:hover {
opacity:0.5;
}
.content {
position: relative;
}
.info {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
position: absolute;
z-index: -1;
}
.title {
font-size: 20px;
font-weight: bold;
}
.year {
font-size: 15px;
font-weight: bold;
}
.size {
font-size: 15px;
font-weight: bold;
}
See this fiddle
Since you are using absolute positioning, use
left:0;
right:0;
to make items centralized.
Thus your new CSS for .info would be like
.info {
text-align: center;
margin-top: 100px;
position: absolute;
z-index: -1;
right:0;
left:0;
}
I have an Image on the page. I have put a Div on footer with a heading and a paragraph inside the Div. I have made the Div's background transparent like this way , background-color: rgba(0,0,0,.6);.
But I need to implement this like this way , background-color:black; opacity:0.6".
The problem is, if I am doing it using opacity then the heading and paragraph is also getting blur with the Div's colour. How can I solve it?
Below is my full code.
CSS
<style type="text/css">
.div1 {
max-width: 100%;
height: auto;
text-align: center;
display: block;
border: none;
}
.feature-text-overlay {
background-color: rgba(0,0,0,.3);
bottom: 0;
padding: .6em 0 .8em;
position: absolute;
text-align: center;
width: 100%;
}
.feature-title {
font-size: .875em;
margin: 0;
text-transform: uppercase;
color:white;
}
.feature-description {
line-height: 1.2;
margin: 0 2em;
color:white;
}
</style>
Html
<div class="div1">
<img src="~/Content/Image/rendering-graphics-in-resolution-222734.jpg" />
<div class="feature-text-overlay" style="height:52.599999277954px; min-height:1px;">
<h4 class="feature-title">Enterprise Mobility Suite</h4>
<p class="feature-description">Manages Users, Devices and Data</p>
</div>
</div>
css
.feature-text-overlay {
bottom: 0;
padding: .6em 0 .8em;
position: absolute;
text-align: center;
width: 100%;
position:relative; /* add this to specify position */
}
/* create pseudo css element */
.feature-text-overlay:before {
content:"";
background-color: #000;
opacity:0.3;
bottom: 0;
top:0;
right:0;
left:0;
position: absolute;
}
Demo
edit as per comment demo 2
I want to create a white hover caption that is centered vertical and horizontal. Around that i would like to add the same padding/margin and within some padding/margin with the title/caption centered, horizontal and vertical.
Because everything is responsive i think is best to use % for the most of the elements. Maybe the structure of the thumbnail/caption (html) needs to be written differently, i'm a bit stuck now.
In the example image i added some red marks what i mean.
Example:
---> FIDDLE
<div class="col-4">
<a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption"><span>Project title centered vertical and horizontal</span></div>
</a>
</div>
One option can be the use of inline-block on the span element to vertical algin, and for the space use padding and box-sizing on caption. Check this:
.caption {
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
background-color: white;
text-align: center;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
box-sizing:border-box;
padding:5px;
}
.caption span {
display: inline-block;
opacity: 0;
vertical-align:middle;
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
background-color: white;
}
.caption:before {
content:" ";
height:100%;
width:0;
display:inline-block;
vertical-align:middle;
}
DemoFiddle
Check this fiddle.
Display the parent as a table-cell and use vertical align to center everything
.block {
background-color: #eee;
min-height: 200px;
display: table-cell;
vertical-align: center;
text-align: center;
}
.block-contents {
background-color: #fff;
padding: 20px;
margin: 20px;
}
You could always position the span absolutely too.
.caption span {
display: block;
position: absolute;
top:50%;
left:50%;
width:100%;
transform: translate(-50%, -50%);
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
background-color: white;
}
JSfiddle Demo