I want a responsive img with text on top. Ive tried several different ways and I semi-get there with a bunch of kinks when I try to make it responsive, so I appreciate if anyone has a simple solution.
JSFiddle
Code snippet demonstration :
.img-fluid {
max-width: 100%;
height: auto;
opacity: 0.4;
}
<div class="container">
<img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid">
<div class="container">
<h1>Header</h1>
</div>
</div>
You can try this , here is the code
<html>
<head>
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Image Text within container</h2>
<div class="container">
<img src="abc.jpg" alt="abc" style="width:100%;">
<div class="centered">Centered</div>
</div>
</body>
You can make use of font-size: calc(2vw + 2vh + 2vmin) (tweak around the values to your need) to make text responsive with respect to viewport size :)
.container {
position: relative;
}
.container h1 {
position: absolute;
top: 0;
left: 20px;
font-size: calc(2vw + 2vh + 2vmin);
}
.img-fluid {
max-width: 100%;
height: auto;
opacity: 0.4;
}
<div class="container">
<img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid">
<h1>Header</h1>
</div>
Try setting position to absolute or fixed
.img-fluid{
max-width:100%;
height:auto;
opacity:0.4;
position: absolute;
}
HTML:
<div class="banner">
<img src="images/star.png" class="img-responsive" width="150" height="150" alt="star">
<h2>This is a Star</h2>
</div>
CSS:
.banner img{position:relative; width:100%; height:auto;}
.banner h2{[psition:absolute; left:50%; top:50%; font-size:30px;
line-height:30px;}
for an image use the concept:
{
display: table;
position: relative;
width: 100%;
height: auto;
}
for text to display on image use the concept
{
display: table-cell;
verticl-align: middle;
position: absolute;
}
and adjust the text on image giving top or bottom or left or right}
use the class img-responsive to not to change the width and height of image in all the views.
Related
Im trying to style a div I need to be able to center both lines of text on top of each other with the image (.hand) next them on the right. I can not get this. I must not be understanding how to do this because I've looked up solutions but they are not working for me. Here is my codepen: https://codepen.io/iamgonge/pen/MQvEWY?editors=1100
here is an image of what it should look like:what section should look like.
here is my code:
HTML:
<div class="events">
<h1>You're Cool, We're Cool,</h1>
<p class="moveit">come see us at a event near you.</p>
<img class="hand"src="http://res.cloudinary.com/adamscloud/image/upload/v1518559592/hand_lco9ed.png">
</div>
CSS:
.events {
background: #fbdd37;
height: 150px;
}
.events h1{
margin-top: 0;
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.moveit{
margin-top: 0;
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hand {
width: 8%;
}
Any help here would be greatly appreciated!
You can try using flexbox.
Enclose the h1 and p in a div(.text) and then
add display:flex; in the .events container
also you will need to set the margin of h1 and p since they have a default margin.
p,h1{ margin:10px 20px; }
Please see the sample code below.
.events {
background: #fbdd37;
height: 150px;
padding:0;
margin:0;
display:flex;
justify-content:center;
align-items:center;
}
.text{
text-align:center;
}
.hand {
width: 15%;
}
p,h1{
margin:10px 20px;
}
<div class="events">
<div class="text">
<h1>You're Cool, We're Cool,</h1>
<p class="moveit">
come see us at a event near you.
</p>
</div>
<img class="hand"src="http://res.cloudinary.com/adamscloud/image/upload/v1518559592/hand_lco9ed.png">
</div>
You should put the events and moveit into a container div:
<div class="events">
<div id="container"> <!-- This div added -->
<h1>You're Cool, We're Cool,</h1>
<p class="moveit">come see us at a event near you.</p>
</div>
<img class="hand"src="http://res.cloudinary.com/adamscloud/image/upload/v1518559592/hand_lco9ed.png">
</div>
And then the minimal CSS:
.events {
background: #fbdd37;
height: 150px;
text-align:center;
width:100%;
}
.moveit{
margin-top: 0;
}
#container{
text-align:center;
float:left;
margin-left:500px;
}
.hand {
width: 8%;
float:left;
margin-left:50px;
}
This gets you close to your picture. Of course, adjust the fonts, etc. for a closer match.
This should give you something close. I used flexbox. You would just need to style the font style, boldness, and etc.
--HTML--
<div class="events">
<div class="texts">
<div class="first-line">
<h1>You're Cool, We're Cool,</h1>
</div>
<div class="second-line">
<h2 class="moveit">come see us at a event near you.</h2>
</div>
</div>
<img class="hand"
src="http://res.cloudinary.com/adamscloud/image/upload/
v1518559592/hand_lco9ed.png"/>
</div>
--CSS--
.events {
background: #fbdd37;
height: 150px;
display: flex;
text-align: center;
justify-content: center;
}
.hand {
width: 10%;
height: 40%;
margin: 35px 20px;
}
You can do it like this. It works mainly with inline-blocks and two wrapper DIVs, the inner one wrapping the two text elements, the outer one wrapping the inner wrapper and the image. that outer wrapper is centered with text-align: center, which works since it's an inline-block. The vertical centering is done the usualy way: position: relative, top: 50% and transform: translateY(-50%):
.events {
background: #fbdd37;
height: 150px;
position: relative;
text-align: center;
}
.outer_wrap {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.inner_wrap {
display: inline-block;
}
.events h1 {
margin-bottom: 0;
}
.moveit {
margin-top: 0;
}
.hand {
display: inline-block;
width: 120px;
padding-left: 10px;
height: auto;
}
<div class="events">
<div class="outer_wrap">
<div class="inner_wrap">
<h1>You're Cool, We're Cool,</h1>
<p class="moveit">come see us at a event near you.</p>
</div>
<img class="hand" src="http://res.cloudinary.com/adamscloud/image/upload/v1518559592/hand_lco9ed.png">
</div>
</div>
The same in a codepen: https://codepen.io/anon/pen/QQMqOw
Trying to get the header and images under it right in the middle of the page but am having a lot of trouble figuring out how to do that. Tried manipulating the box model with no luck. I'm really new to this stuff so any advice helps.
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
position: relative;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition:all 1s;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 400px;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
<script src="app.js"></script>
</body>
</html>
You could use flexbox for this
body {
height: 100vh;
background: radial-gradient(gold, goldenrod);
font-family: monospace;
font-size: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition: all 1s;
}
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
Try something like this:
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
position: relative;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition: all 1s;
}
.container {
width: auto;
margin: auto;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
<script src="app.js"></script>
</body>
</html>
Issue is positioning and use of property left, top which even hide top text when you reduce screen size, instead you can change it's position to relative and then use margin to align that at center of page,
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
position: relative;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition: all 1s;
}
.container {
position: relative;
min-height: 400px;
background: red;
margin: auto;
display: inline-block;
}
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="http://via.placeholder.com/100x100" alt="rock">
<img src="http://via.placeholder.com/100x100" alt="paper">
<img src="http://via.placeholder.com/100x100" alt="scissors">
<p></p>
</div>
Alright, so this can be done by a dirty little trick i learned when i started. Before i get to that, i would like to make some changes to your code:
A) No need for setting position: relative; for body because all the elements automatically move in relation to the body of your page. Setting the position to relative means that you are confining the position element of everything inside the body as relative. So it will ignore the absolute of the .container class.
B) Second, i don't see a reason why if you want to keep the header and the images together, you do not keep them under a single class. It makes it easier to move them around together rather than shifting one by one.
Now to the trick, for starters, you need to set the min-heightand min-width
of the container class in pixels. Once you have done that, you can position the class at the middle by:
top: 50%;
left:50%;
margin-top: -200px; /*half of the height of the container*/
margin-left: -200px; /*half of the width of the container*/
So, now your code, all summed up must something like this:
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition:all 1s;
}
.container {
position: absolute;
min-width: 400px;
min-height: 200px;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
<body>
<div class="container">
<h1>Choose Your Weapon</h1>
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
<script>
</script>
</body>
and guess what, it's even responsive :)
I'm trying to create a vertically aligned image, but also have it float left with a 10px padding.
Here is what I have so far:
<div class="container">
<div class="header">
<div class="headliner"><strong>blaw</strong>
<br />blah</div>
<div class="header_eta"></div>
</div>
<div class="content">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/75x75" alt="" />
</div>
</div>
<div class="footers"></div>
</div>
You can also check out this fiddle.
I can't seem to get the img to float: left. It seems to be centered horizontally. Once the I get the image floated left, I need to float some text to the left side of the image.
UPDATE: Something like this https://cdn.shopify.com/s/files/1/0070/7032/files/UberRUSH_Tracking_Page-5_1.png?5766570299208136168
Add text-align:left into img-container with padding-left:10px;
Like this:
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align:left; /* Align center inline elements */
font: 0/0 a;
padding-left:10px
}
try float:lefton the image, then add a div into img-container also floated left with a suitable margin
<div class="img-container">
<img src="http://placehold.it/75x75" alt="" style="float:left;"/>
<div style="float:left;margin-left:10px;">Your Content</div>
</div>
In order to achieve your desired result, you can use the following CSS code:
/* Positioning */
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
Setting top: 50% and transform: translate(..., -50%) will center your element vertically.
Setting left: 0 and transform: translate(0, ...) will float your element horizontally to the left.
For optical reference you can check my code work in this fiddle.
<div class="container">
<div class="header">
<div class="headliner"><strong>blaw</strong>
<br />blah</div>
<div class="header_eta"></div>
</div>
<div class="content">
<div class="img-container-2">
<div class="img-cell">
<img src="http://placehold.it/75x75" alt="" />
</div>
</div>
</div>
<div class="footer"> </div>
</div>
<style type="text/css">
.content {height:300px; background-color:rgb(239, 65, 59);}
.header {height:60px; background-color:rgb(55, 102, 199);}
.img-container-2 {display:table; height:100%; width:100%; text-align:left;}
.img-cell {display:table-cell; vertical-align:middle;}
.headliner {padding:10px; height:50px;}
.footer {height:40px; background-color:rgb(66, 199, 123);}
</style>
img-container text align to left;
text-align: left;
here you code
.img-container {
position: absolute;
top: 10px;
bottom: 0;
left: 10px;
right: 0;
text-align: left;
/* Align center inline elements */
font: 0/0 a;
}
Once the I get the image floated left I need to float some text to the left side of the image.
So you will need to align two divs horrizontaly. For this you will need to use display: inline-block for both of them. By using this approach, you will need to put the image inside a div, and the text inside another div.
You could also make a table with the first td containing the text and the second td containing the image. Then float table to left.
Do you need like this,
Html code:
<div class="container">
<div class="header">
<div class="headliner"><strong>" blaw "</strong><br />" IS EN ROUTE "</div>
<div class="header_eta"></div>
</div>
<div class="content">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/75x75" alt="" />
</div>
</div>
<div class="footer">sdfsd</div>
</div>
css:
.content {
height: 100px;
position: relative;
width: 100%;
border: 1px solid black;
background-color: rgb(239, 65, 59);
}
.header {
height: 60px;
background-color: rgb(55, 102, 199);
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 10px;
bottom: 0;
left: 10px;
right: 0;
text-align: left;
}
.img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
vertical-align: middle;
display: inline-block;
}
.headliner {
padding:10px;
height:50px;
}
.footer {
height: 40px;
padding-bottom: 0px;
padding-left: 5px;
padding-top: 5px;
background-color: rgb(66, 199, 123);
text-align: left;
}
you can refer a link:https://jsfiddle.net/vpbu7vxu/5/
I have the following html:
<div class="article">
<img src="..." class="article-bg">
<h1 class="heading">Article Heading</h1>
<h2 class="author">Author Name</h2>
</div>
The article divs background image gets set dynamically, so setting the divs background in css is out, I have to use an image tag. I'm not too sure though how to use an img as the divs background, and at the same time have text over the img.
Also the height of the article div should always be 180px, I only have the following simple CSS:
.article {
height: 180px;
padding: 10px;
background-color: blue;
}
Thanks in advance for any tips!
You can do it by this way:
<div class="article">
<img src="http://www.bdembassyusa.org/uploads/images/beautiful-Bangladesh-23.jpg" class="article-bg">
<h1 class="heading">Article Heading</h1>
<h2 class="author">Author Name</h2>
</div>
Ad some more css below:
.article{
height: 180px;
padding: 10px;
background-color: blue;
overflow:hidden;
}
.article img{
position:absolute;
z-index:0;
width: 100%; // make the img fluid
height:200px;
margin:-10px;
object-fit: contain; // similar to `background-size: contain;`
}
.article h1,.article h2{
position:relative;
z-index:1;
}
Test it on jsfiddle:
http://jsfiddle.net/sarowerj/o9L72do0/
What you're looking for in z-index.
Using Z-index allows you to position one element above of the other. But do keep in mind that z-index does only work with positioned elements such as absolute or relative positioning.
You do specify a z-index as follows in the CSS:
.heading { position: absolute; top: 10px; left: 10px; z-index: 900; color: #fff; }
See this jsFiddle for a demo on how to use it:
You can use the CSS property object-fit for this.
However it is worth noting that this property has very little to no support on IE and Edge browser.
.conainer{
position: relative;
width: 500px;
height: 300px;
color: #ffffff;
overflow: hidden;
margin: auto;
}
.conainer img{
position: absolute;
top: 0;
left: 0;
transition: all 1s ease;
}
.conainer:hover img{
transform: scale(1.2);
}
.conainer .content{
position: relative;
z-index: 1;
}
.conainer .content h2{
color: white;
text-shadow: 3px 2px 10px #545454;
text-align: center;
}
<div class="conainer">
<div><img src="https://placeimg.com/640/480/nature" alt=""></div>
<div class="content">
<h2>Here's an example</h2>
</div>
</div>
You can use this code, to make <img> behave like a background image:
<img src="..." class="background-image" />
.background-image {
position: absolute;
z-index: -1;
min-width: 100%;
min-height: 100%;
left: 0;
top: 0;
pointer-events: none;
}
use
<div class="article" style="background: url(imageurl)">
</div>
I'm learning html and css, but I have some troubles.
Right now I'm making a site that has a small images with different w sizes.
The point is that, when you hover on them they show up clickable elements, and I can't get the right position on them.
What I have:
What I want:
Part of code for this:
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="zoom">
</div>
<div class="all">
</div>
<div class="link">
</div>
<div class="info">
</div>
<div class="like">
</div>
</div>
CSS:
.photo img {
float:left;
width:auto;
height:auto;
}
.photo:hover {
display: block;
opacity:0.6;
}
.photo:hover .zoom {
position: absolute;
background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat:no-repeat;
width:46px;
height:50px;
background-position:center;
http://jsfiddle.net/zzu87/
You need to add some positioning to each image if you use position: absolute. Try something like this:
.photo:hover .zoom {
position: absolute;
top: 50%;
left: 200px;
background-image: url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat: no-repeat;
width: 46px;
height: 50px;
background-position: center;
}
This should get you where you want to go. (JS fiddle)
css
.photo {
display:block;
position:absolute;
background-image: url('//placekitten.com/400/300');
background-repeat: no-repeat;
width:400px;
height:300px;
}
.photo>.container {
display:none;
}
.photo>.container>div {
display:inline;
}
.photo:hover>.container {
display:block;
margin-left: 85px;
margin-top: 200px;
}
html
<div class="photo">
<div class="container">
<div class="zoom">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="all">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="link">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="info">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="like">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
</div>
</div>
First float the parent div left and set the position to relative. Then you'll have better control over the positioning of any child elements.
.photo {
float:left;
position:relative;
}
After, padding, margin, bottom, left, right, and top can be used to achieve the specific location desired inside the parent div. Here I used left and top...
.photo:hover .zoom {
position: absolute;
background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat:no-repeat;
width:46px;
height:50px;
background-position:center;
left:50%;
top:50%;
}
Here is the FIDDLE.
Interesting question. I solved the problem by making more div containers for the photo and its contents. Also, I worked under assumption that your photo images are 400x300. Modify the code as you like! :)
I think the interesting part about my solution is that I used only position: relative; which lifts up the hover menu above your images so it plays together nicely:
.photo-menu {
position: relative;
left: 0px;
top: -300px;
}
Thus, most of the horizontal position is accomplished using margin: 0 auto; instead of playing too much with absolute or relative position. Generally speaking, those can be avoided most of the time. It depends.
The result can be also viewed from the following: js fiddle example or from this jsfiddle example if cat images are removed sometime later.
Linking also relevant code below:
HTML:
<div class="photo-container">
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="photo-menu">
<div class="upper-menu"></div>
<div class="lower-menu">
<div class="all"></div>
<div class="link"></div>
<div class="info"></div>
<div class="like"></div>
</div>
</div>
</div>
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="photo-menu">
<div class="upper-menu"></div>
<div class="lower-menu">
<div class="all"></div>
<div class="link"></div>
<div class="info"></div>
<div class="like"></div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0px;
padding: 0px;
}
.photo-container {
width: 800px;
}
.photo {
float: left;
width: 400px;
}
.photo, .photo-menu {
width: 400px;
height: 300px;
}
.photo:hover {
display: block;
opacity: 0.6;
}
.photo-menu {
position: relative;
left: 0px;
top: -300px;
}
.photo .photo-menu {
display: none;
}
.photo:hover .photo-menu {
display: block;
}
.photo-menu .upper-menu {
background-image: url("http://www.kolazhgostar.com/images/small-img05.png");
background-repeat: no-repeat;
background-position: center;
width: inherit;
height: 200px;
margin: 0 auto;
}
.photo-menu .lower-menu {
width: 280px;
margin: 0 auto;
height: 100px;
}
.photo-menu .lower-menu div {
min-width: 40px;
width: 24.9999%;
height: 40px;
background-repeat: no-repeat;
background-position: center;
float: left;
}
.photo-menu .lower-menu .all {
background-image: url("http://placehold.it/40/ff0000");
}
.photo-menu .lower-menu .link {
background-image: url("http://placehold.it/40/00ff00");
}
.photo-menu .lower-menu .info {
background-image: url("http://placehold.it/40/0000ff");
}
.photo-menu .lower-menu .like {
background-image: url("http://placehold.it/40/c0ff33");
}
Note: I used placehold.it to place dummy images for the icons.
Cheers.