I'm working on an div that comprises of 2 elements: an image and a text. The image occupying the first half (top) of the div, and the text occupying the bottom second part of the div (bottom).
I would like for the image to fit the size of the div, but not to stretch, and also want to apply different hover effects to each element. I've been working on it but I don't get to build this kind of structure. This is what I have so far:
.work-item {
position:relative;
height:300px;
width:350px;
}
.work-item-image {
position:absolute;
top:0;
}
.work-item-image img {
max-height: 150px;
max-width: 350px;
object-fit: cover;
}
.work-item-text {
position:absolute;
vertical-align:middle;
max-height: 150px;
max-width: 350px;
}
<div class="work-item">
<a href="#">
<div class="work-item-image">
<img src="..."/>
</div>
<div class="work-item-text">
<h1>Hello Worl</h1>
</div>
</a>
</div>
Don't fix the width for image. And width of each div must be equal. This code might help you. Resize your image with Photoshop, etc.
.work-item {
position:relative;
height:300px;
width:350px; or width: 100%;
}
.work-item-image {
position:absolute;
top:0;
}
.work-item-image img {
max-height: 150px;
object-fit: cover;
}
.work-item-text {
position:absolute;
vertical-align:middle;
max-height: 150px;
width: 350px; or width: 100%;
}
use this css for .work-item-image
.work-item-image {
float: right;
width: 100%;
}
Just use display: inline-block instead of position absolute like this:
.work-item {
position:relative;
height:300px;
width:350px;
}
.work-item-image {
display: inline-block;
}
.work-item-image img {
max-height: 150px;
max-width: 350px;
object-fit: cover;
}
.work-item-text {
display: inline-block;
max-height: 150px;
max-width: 350px;
}
<div class="work-item">
<a href="#">
<div class="work-item-image">
<img src="..."/>
</div>
<div class="work-item-text">
<h1>Hello Worl</h1>
</div>
</a>
</div>
Try this. Try to find other solutions then absolute.
CSS:
.work-item {
height:300px;
width:350px;
}
.work-item-image {
top:0;
}
.work-item-image img {
max-height: 150px;
max-width: 350px;
object-fit: cover;
}
.work-item-text {
margin: 0 auto;
vertical-align:middle;
max-height: 150px;
max-width: 350px;
}
h1 {
text-align: center;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
HTML:
<div class="work-item">
<a href="#">
<div class="work-item-image">
<img src="..."/>
</div>
<div class="work-item-text">
<h1>Hello Worl</h1>
</div>
</a>
</div>
Related
I am trying to create my own lightbox, and now i am stuck on design part, i've manager to create slide box with horizontal responsive image as i want
<div class="gallery">
<div class="container">
<span class="centerer"></span>
<div>
<img src="http://images.car.bauercdn.com/pagefiles/18474/bmw_7-series_05.jpg">
</div>
</div>
<a class="arrow left" href="#">
<span class="centerer"></span>
<img src="http://i.imgur.com/GbeQojB.png" />
</a>
<a class="arrow right" href="#">
<span class="centerer"></span>
<img src="http://i.imgur.com/GbeQojB.png" />
</a>
</div>
_
a {
text-decoration: none;
}
.gallery {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #333;
}
.container {
width:80%;
height:100%;
position:absolute;
left:10%;
text-align: center;
}
.container div {
display:inline-block;
width:95%;
}
.centerer {
height: 100%;
display: inline-block;
vertical-align: middle;
}
img {
vertical-align: middle;
display: inline-block;
max-width: 100%;
max-height: 100%;
}
.arrow {
width:10%;
height:100%;
display:block;
position:fixed;
text-align: center;
}
.arrow img {
display:inline-block;
opacity:0.5;
width:50%;
}
.arrow:hover img {
opacity:1;
}
.arrow.left {
transform: rotate(180deg);
left:0;
}
.arrow.right {
right:0;
}
https://jsfiddle.net/4zpk43f2/
, but when i use it with vertical photo, it ... sucks.
I've tried to change some display settings, but it's or good for vertical, or good for horizontal.
https://jsfiddle.net/d470vkc9/1/
In your code, you limited the width of the image to 80% by applying width: 80% to the .container. and you gave height: 100% to the same. That is why the image was stretching to full, vertically. Mention height also as 80% as you did to the .container.
Try this:
.container {
height: 80%;
top: 10%;
/* other styles */
}
.container > div {
height: 100%; /* or less as you prefer */
}
Working Fiddle
i want to center a image and place some text under it.
The picture should be everytime in the middle of the screen, doesnt matter how i scale the viewport. Also the text has to be under the picture everytime.
The Backgroundcolor has to be #EF762F
It worked for me on one screen with this
https://jsfiddle.net/j2Lec36d/ , but if i watch it on another screen, with other resolution, the text is not centered under the image anymore.
Also the span has to be positioned absolute left with -100%, jQuery slides it then to 50%
HTML:
<div id="sh_start">
<img src="test.jpg"></img>
<span>Test</span>
</div>
CSS:
body, html { font-family: arial; font-size: 12px; margin:0; padding:0; width: 100%; height: 100%; background-color:#fff;overflow:hidden;}
#sh_start img {display: block;padding:5% 0 0 30%;width: 40%; height: auto; position:absolute; top:5%;left:0; right:0; bottom:0;}
#sh_start span {width: 100%; height: auto;display:block;position:absolute;top:58%;left:50%; color:#fff; font-family:ReplicaPro-Bold;font-size:50px;opacity:0.4;}
#sh_start {display:block;background-color:#EF762F;position: absolute; top:0;left:0;width:100%; height: 100%; overflow:hidden;}
You can do this quite simple using flexbox:
$(document).ready(function(){
$( "#sh_start span" ).animate({
left: "50%",
left: "toggle"
}, 5000, function() {
// Animation complete.
});
})
#sh_start img {display: block;width: 40%; height: auto; }
#sh_start span{width: 100%; height: auto;display:block; color:#fff; font-family:ReplicaPro-Bold;font-size:50px;opacity:0.4;
position: relative; left: 100%;
}
#sh_start {display:block;background-color:#EF762F;position: absolute; top:0;left:0;width:100%; height: 100%; overflow:hidden;display:flex;align-items: center; justify-content: center;flex-direction: column;text-align: center;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="sh_start">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQNjQ76c71y3CL0xrOhpl3wf3W5X3Mi3ddv1SUH3UbkPBz3SWPAuw">
<span>Test</span>
</div>
You can try to use the framework bootstrap and do like this:
HTML:
<div class="container">
<div class="row text-center">
<div class="col-lg-12">
<img src="http://placehold.it/700x400" class="img-responsive" alt="">
<h1>Text under image</h1>
</div>
</div>
</div>
CSS:
img {
margin: 0 auto;
}
The image CSS:
#sh_start img {
display: block;
padding: 5% 0 100px 0;
width: 40%;
height: auto;
margin: 0 auto;
}
The span CSS:
#sh_start span {
width: 100%;
height: auto;
display: block;
position: relative;
bottom: 20px;
// left: -100%;
left: 0;
color: #fff;
font-family: ReplicaPro-Bold;
font-size: 50px;
opacity: 0.4;
text-align: center;
}
And the container CSS:
#sh_start {
background-color: #EF762F;
}
You can just animate the left property of the span from 100% to 0.
You can see the code in action here: https://jsfiddle.net/7pnrq1xd/1/
I'm not entrirely sure what your restrictions are or if they are restrictions at all but why not just do this to your span:
left:0;
text-align:center
#sh_start {
display:block;
background-color:#EF762F;
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
overflow:hidden;
}
#sh_start img {
display: block;
padding:5% 0 0 30%;
width: 40%;
height: auto;
position:absolute;
top:5%;
left:0;
right:0;
bottom:0;
}
#sh_start span{
width: 100%;
height: auto;
display:block;
position:absolute;
top:58%;
left:0;
color:#fff;
font-family:ReplicaPro-Bold;
font-size:50px;
opacity:0.4;
text-align:center;
}
<div id="sh_start">
<img src="test.jpg"></img>
<span>Test</span>
</div>
First Create a DIV Tag where you will place both your image and caption.
<div class="imagewrapper">
<img src="imagehere.jpg">
<p class="imagecaption">Image Caption Here</p>
</div>
Now Code your CSS Something like this.
.imagewrapper {text-align:center}
.imagewrapper img {max-width:100%}
Do not forget to add styling for your image caption class. With above code your image and text will stay in center on any screen size.
Hope that helps.
Regards
Manoj Soni
I have removed the position:absolute declarations, and compacted the CSS code
#sh_start
{
background-color:#EF762F;
width:100%;
height: 100vh;
float:left;
}
#sh_start img, #sh_start span
{
float:left;
width:40%;
height:auto;
margin-top:5%;
margin-left:30%;
text-align:center;
}
#sh_start span
{
color:#fff;
font-family:ReplicaPro-Bold;
font-size:50px;
opacity:0.4;
margin-top:1px;
}
Then in the HTML I have fixed the 'img' closing tag.
<div id="sh_start">
<img src="test.jpg" />
<span>Test</span>
</div>
Live demo: https://jsfiddle.net/j2Lec36d/10/
Html:
<div class="myDiv">
<img class="myImage" src="...." >
</div>
Css:
.myDiv {
padding: 20px;
}
.myImage {
max-width: 100%;
height: auto;
// ??
}
I don't mind that there will be space above and below the image (20px since the container has that as padding) But width-wise I'd like to break through the padding and have the image 100% of the div. Is this possible?
You can use margin in negetive.
.myImage{
margin-left:-20px;
}
OR
Do it with position
.myDiv {
padding: 20px;
position:relative;
}
.myImage {
position:absolute;
left:0;
top:0; // or 20px as you want
width:100%;
}
You have two approachs:
First one: Add padding only in one axis.
.myDiv {
padding: 20px 0 ;
width: 100px;
height: 100px;
}
.myImage {
width: 100%;
height: 100%;
}
<div class="myDiv">
<img class="myImage" src="http://www.hdbloggers.net/wp-content/uploads/2016/01/Background.png" >
</div>
Second one: Use negative margin.
.myDiv {
padding: 20px;
width: 100px;
height: 100px;
}
.myImage {
margin: -20px;
width: 100%;
height: 100%;
}
<div class="myDiv">
<img class="myImage" src="http://www.hdbloggers.net/wp-content/uploads/2016/01/Background.png" >
</div>
You can approach this differently too. Instead of having a full-width image inside a padded div, you can have a padded div inside full-width image (contained by a div).
.full-width-image {
background: url('http://placehold.it/1920x1080') no-repeat center center;
}
.padded-div {
padding: 50px;
}
<div class="full-width-image">
<div class="padded-div">
I am a padded div with a full-width background.
</div>
</div>
I need to display single page as below:
http://s18.postimg.org/epvzomt0p/P_62343_Patron_Roca_Ebrochure_R2_01_1.png
I made working example in
https://jsfiddle.net/dipchk/pua95mwg/1/
Can any one tell me what more I need to implement in css in order to look like above image
<body>
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
</body>
css
.wrapper {
width: 90%;
height: 90%;
position: relative;
background-color: white;
}
.wrapper div {
padding: 10px;
}
#one {
background:url('http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png') no-repeat;
display: block;
position: absolute;
width:70%;
height: 50%;
}
#two {
background:url('http://s18.postimg.org/9zimjy25l/P_62343_Patron_Roca_Ebrochure_R1.jpg') no-repeat;
position: absolute;
display: inline-block;
width: 15%;
height: 40%;
}
Please check this solved
body{margin:0; padding:0;background:#ddd;}
.wrapper {
position: relative;
background-color: #fff;
width:580px;margin:0 auto;
padding:40px 0;
height:500px;
}
.wrapper div {
}
#one {
}
#one img {
width:100%;
}
#two{position: absolute;
right: 0px;
top: 72px;}
#two img {
width: 166px;
}
<body>
<div class="wrapper">
<div id="one"><img src="http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png"></div>
<div id="two"><img src="http://i.stack.imgur.com/rg43a.png"></div>
</div>
</body>
You Just Remove
Position:absolute;
and Do what you want.
Thank you
It's difficult to understand exactly what you are asking.
According to the image you showed, please check the following code.
body{margin:0; padding:0;}
.wrapper {
position: relative;
background-color: #ccc;
}
.wrapper div {
}
#one {
background:url('http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png') no-repeat;
width:580px;
height: 142px;
margin:0 auto;
}
#two {
background:url('http://s18.postimg.org/9zimjy25l/P_62343_Patron_Roca_Ebrochure_R1.jpg') no-repeat;
width: 580px;
height: 924px;
margin:0 auto;
}
<body>
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
</body>
I am trying to create a page layout something like this.
This is my HMTL structure -
<div id="content-three-cols">
<div class="leftcol">
</div>
<div class="cols-content">
<div class="banner">
</div>
<div class="two-cols">
<div class="rightcol">
</div>
<div class="middlecol">
</div>
</div>
</div>
</div>
This is my CSS code so far -
.leftcol {
display: inline;
float: left;
min-height: 500px;
width: 180px;
background: #34ab2b;
}
.banner {
background: #ffe400;
border-bottom: 1px solid #DDDDDD;
float: left;
width: 750px;
height: 150px;
}
.middlecol {
width: 600px;
min-height: 600px;
background: #2b73ab;
}
.rightcol {
width: 150px;
min-height: 500px;
background: #b2540f;
float: right;
}
Adding this styles I couldn't get my expecting output. Instead my desire result this code create a mess layout for me. Can anybody tell my how can I figure this out.
This is JsFiddle
Thank you.
Quite simple really, here is a quick demo i made, i will explain everything in a second.
Demo
HTML:
<div class="left"></div>
<div class="head"></div>
<div class="center"></div>
<div class="right"></div>
CSS:
body, html{
height:100%;
}
.left, .right, .head, .center{
float:left; // Float all the containers to the left so have a `inline` effect
}
.left{
height:100%;
width:25%; // Full width minus right and center width
background:orange;
}
.head{
background:red;
height:10%; // Height of header
width:75%; // Full width minus left sidebar
}
.center{
width:50%; // Full width minus both sidebar's width
background:skyblue;
height: 90%; // Full height minus header height
}
.right{
width:25%; // Full width minus center and left width
background:green;
height:90%; // Full height minus header height
}
also note, you may need to have a Clearfix handy seeing as a lot of elements are floating in thin air.
Happy coding :)
Clearfix...
Well take a look at this fiddle, everything is working fine
http://jsfiddle.net/mqzJN/
Now if we add a float to the link like this
http://jsfiddle.net/mqzJN/1
Then you can see the background is gone, because the <div> doesn't have any height any more because the link is floating in thin air.
So you use a clearfix to fix this, like in this fiddle
http://jsfiddle.net/mqzJN/2/
So any element that has a float you might wan't to add the clearfix class to the container of that element like in the last fiddle example.
There you go! (http://jsfiddle.net/aV2Dn/)
<div id="wrapper">
<div id="left_column"></div>
<div id="top_bar"></div>
<div id="middle"></div>
<div id="right_column"></div>
</div>
#wrapper{
width:500px
height:500px;
margin: auto;
}
#left_column{
width: 100px;
height:500px;
background: #34ab2b;
position:absolute;
left:0px;
top: 0px;
}
#top_bar{
position: absolute;
left: 100px;
top: 0px;
width: 400px;
height:100px;
background-color: #ffe400;
}
#middle{
position: absolute;
left: 100px;
top: 100px;
width: 300px;
height:400px;
background: #2b73ab;
}
#right_column{
position: absolute;
left: 400px;
top: 100px;
width: 100px;
height:400px;
background: #b2540f;
}
here
The HTML:
<body>
<div class="left">
</div>
<div class="right">
<div class="upper"></div>
<div class="lower">
<div class="innerLeft"></div>
<div class="innerRight"></div>
</div>
</div>
</body>
The CSS:
body {
width: 100%;
}
.left {
width: 25%;
height: 450px;
float: left;
background-color: #f00;
}
.right {
width: 75%;
height: 450px;
float: right;
background-color: #4cff00;
}
.upper {
width: 100%;
float: left;
height: 100px;
background-color: blue;
}
.lower {
width: 100%;
height: 100px;
background-color: grey;
}
.innerLeft {
width: 65%;
float: left;
height: 350px;
background-color: fff;
}
.innerRight {
width: 35%;
float: right;
height: 350px;
background-color: #000;
}