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
I'm new to web development and I am stuck on this problem. What I am trying to do is show a words on the left(20-30% width/ small square) and img(70-80% large square)on the right then right.Directly below it have a small img box of with a large word box on the right.
For the life of me I can't make both the same height as well.
Sorry I'm describing it the best way I can.
I want it to look like this website reservation and about div.
https://dribbble.com/shots/2052368-Faicco-s-Italian-Restaurant-Parallax/attachments/366053
function sorry(){
alert("This is just a example.")
}
body{
margin: 0;
padding: 0;
}
img{
max-width: 100%;
}
h1,h2,h3,h4,p{
margin: 0;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
html{
background: url("background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%
}
#header-background{
background: url("restaurant.jpg");
height: 75vh;
width: 90%;
margin: 5% auto 0 auto ;
background-size: cover;
background-size: 100% 100%
}
header h3{
float: left;
margin: 21px 0 0 45px;
font-family: Brush Script MT, cursive;
font-size: 42px;
color: white;
}
nav{
float: right;
display: inline-block;
position: relative;
right: 5%;
top:1.5%;
}
nav ul{
list-style-type: none;
}
nav li{
float: left;
text-decoration: none;
margin: 0 27px;
padding: 0;
display: flex;
justify-content: space-around;
color: white;
font-family: 'Lobster', cursive;
}
nav li:before{
padding-right:10px;
}
#header-middle{
width: 50%;
margin:200px auto 0 auto;
text-align: center;
}
.rise h1{
font-size: 50px;
color: white;
margin:0;
letter-spacing: 4px;
}
.rise h2{
font-size: 50px;
color: white;
margin: 0;
}
.rise{
position: relative;
animation-name: rise;
animation-duration: 1.5s;
}
#keyframes rise{
0% {bottom: -500px; opacity:-3;}
100%{ bottom: 0px; opacity: 1; }
}
.rise2{
position: relative;
animation-name: rise2;
animation-duration: 2s;
}
#keyframes rise2{
0% {bottom:-500;opacity:-8;}
100%{bottom:0px; opacity:1;}
}
/*Inner Content*/
#middle{
height: 45vh;
width: 90%;
margin: 0 auto 5% auto ;
background-color: WhiteSmoke;
}
#inner-content-wrapper{
width: 80%;
}
#inner-wrapper{
position: relative;
bottom: 35px;
width: 50%;
margin: 0 auto;
background-color: white;
}
#wrapper{
position: absolute;
width: 100%;
}
#inner-content{
width: 80%;
object-fit: contain;
float: left;
display: block;
}
#inner-content img{
max-width: 100%;
max-height:100%;
display: block;
}
#inner-content:first-child {
width: 20%;
}
#inner-content:nth-child(3){
width: 20%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="food.css">
<title></title>
</head>
<body>
<div id="header-background">
<div class="cf">
<header >
<h3>Taco Día Del</h3>
<nav>
<ul>
<li>Shop</li>
<li>Recipes</li>
<li>News</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
<div id="header-middle" class="rise">
<h2>Taco Día Del</h2>
<h1 class="rise2">Mexican Specialties</h1>
</div>
</div>
<div id="wrapper">
<div id="middle">
<div id="inner-wrapper" class="cf">
<div id="inner-content-wrapper" class="cf">
<div id="inner-content" class="cf">
<h2>Reservation</h2>
<br>
<p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p>
<br>
<a onclick="sorry()">BOOK A TABLE</a>
</div>
</section>
<div id ="inner-content" class="cf">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg">
</div>
<!--Extra-->
<div id ="inner-content" class="cf">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg">
</div>
<div id="inner-content" class="cf">
<h2>Reservation</h2>
<br>
<p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p>
<br>
<a onclick="sorry()">BOOK A TABLE</a>
</div>
</section>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="food.js"></script>
</body>
</html>
There's a lot of problems going on with your code, starting with how your have named the tags. You have used the same ID for almost all the tags. Make use of classes not ID when you want to style more than one element with the same CSS styles. And give unique ID to individual elements which you want to style differently.
I've just taken out the relevant part of the code and modified a few things to demonstrate how the grid (Responsive) has been or could be implemented:
Instead of using img tags, use image as a background for the div containing it.
Use vw units to create squares with the same dimensions and that makes it responsive itself.
For the fonts as well, you can make use of vw units like shown below.
Float the elements to the left and right depending on their unique ID.
Note: This is just a workaround to not implement this code from
scratch. But there are plenty of better and cleaner ways to achieve
this. You can make use of CSS grids or flexbox, etc for that matter.
function sorry() {
alert("This is just a example.")
}
#wrapper{
width:100%;
}
.inner-content-wrapper {
width:81vw;
margin:0 auto;
}
#inner-content1,
#inner-content4 {
width: 20vw;
height: 20vw;
font-size: 1.3vw;
float:left;
border:1px solid gray;
}
#inner-content4{
float:right;
}
#inner-content1,
#inner-content2,
#inner-content3,
#inner-content4 {
display: block;
padding: 0;
margin: 0;
}
#inner-content2 {
width: 60vw;
height: 20vw;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg");
background-size:cover;
float:right;
border:1px solid gray;
}
#inner-content3 {
float:left;
width: 60vw;
height: 20vw;
border:1px solid gray;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg");
background-size:cover;
}
<div id="wrapper">
<div id="inner-wrapper" class="cf">
<div class="inner-content-wrapper" class="cf">
<div id="inner-content1" class="cf">
<h2>Reservation</h2>
<br>
<p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p>
<br>
<a onclick="sorry()">BOOK A TABLE</a>
</div>
<div id="inner-content2">
</div>
</div>
<div class="inner-content-wrapper" class="cf">
<div id="inner-content3">
</div>
<div id="inner-content4" class="cf">
<h2>Reservation</h2>
<br>
<p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p>
<br>
<a onclick="sorry()">BOOK A TABLE</a>
</div>
</div>
</div>
</div>
How can I center align (horizontally) an image inside its container div?
Here's the HTML and CSS. I have also included the CSS for the other elements of the thumbnail. It runs in descending order so the highest element is the container of everything and the lowest is inside everything.
#thumbnailwrapper {
color: #2A2A2A;
margin-right: 5px;
border-radius: 0.2em;
margin-bottom: 5px;
background-color: #E9F7FE;
padding: 5px;
border: thin solid #DADADA;
font-size: 15px
}
#artiststhumbnail {
width: 120px;
height: 108px;
overflow: hidden;
border: thin solid #DADADA;
background-color: white;
}
#artiststhumbnail:hover {
left: 50px
}
<!--link here-->
<a href="NotByDesign">
<div id="thumbnailwrapper">
<a href="NotByDesign">
<!--name here-->
<b>Not By Design</b>
<br>
<div id="artiststhumbnail">
<a href="NotByDesign">
<!--image here-->
<img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
</a>
</div>
<div id="genre">Punk</div>
</div>
Okay, I have added the markup without the PHP in so should be easier to see. Neither solution seems to work in practice. The text at top and bottom cannot be centered and the image should be centered within its container div. The container has overflow hidden so I want to see the center of the image as that's normally where the focus is.
#artiststhumbnail a img {
display:block;
margin:auto;
}
Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/
CSS flexbox can do it with justify-content: center on the image parent element. To preserve the aspect ratio of the image, add align-self: flex-start; to it.
HTML
<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
CSS
.image-container {
display: flex;
justify-content: center;
}
Output:
body {
background: lightgray;
}
.image-container {
width: 200px;
display: flex;
justify-content: center;
margin: 10px;
padding: 10px;
/* Material design properties */
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
width: 500px;
align-self: flex-start; /* to preserve image aspect ratio */
}
.image-3 {
width: 300px;
align-self: flex-start; /* to preserve image aspect ratio */
}
<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
<div class="image-container image-2">
<img src="http://placehold.it/100x100/333" />
</div>
<div class="image-container image-3">
<img src="http://placehold.it/100x100/666" />
</div>
I just found this solution below on the W3 CSS page and it answered my problem.
img {
display: block;
margin-left: auto;
margin-right: auto;
}
Source: http://www.w3.org/Style/Examples/007/center.en.html
This also would do it
#imagewrapper {
text-align:center;
}
#imagewrapper img {
display:inline-block;
margin:0 5px;
}
The best thing I have found (that seems to work in all browsers) for centering an image, or any element, horizontally is to create a CSS class and include the following parameters:
CSS
.center {
position: relative; /* where the next element will be automatically positioned */
display: inline-block; /* causes element width to shrink to fit content */
left: 50%; /* moves left side of image/element to center of parent element */
transform: translate(-50%); /* centers image/element on "left: 50%" position */
}
You can then apply the CSS class you created to your tag as follows:
HTML
<img class="center" src="image.jpg" />
You can also inline the CSS in your element(s) by doing the following:
<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />
...but I wouldn't recommend writing CSS inline because then you have to make multiple changes in all your tags using your centering CSS code if you ever want to change the style.
This is what I ended up doing:
<div style="height: 600px">
<img src="assets/zzzzz.png" alt="Error" style="max-width: 100%;
max-height: 100%; display:block; margin:auto;" />
</div>
Which will limit the image height to 600px and will horizontally-center (or resize down if the parent width is smaller) to the parent container, maintaining proportions.
I am going to go out on a limb and say that the following is what you are after.
Note, the following I believe was accidentally omitted in the question (see comment):
<div id="thumbnailwrapper"> <!-- <<< This opening element -->
<div id="artiststhumbnail">
...
So what you need is:
#artiststhumbnail {
width:120px;
height:108px;
margin: 0 auto; /* <<< This line here. */
...
}
http://jsfiddle.net/userdude/XStjX/3/
yeah, the code like this work fine
<div>
<img/>
</div>
but just to remind u, the style for image
object-fit : *depend on u*
so the final code be like Example
div {
display: flex;
justify-content: center;
align-items: center;
}
div img {
object-fit: contain;
}
<div style="border: 1px solid red;">
<img src="https://img.joomcdn.net/9dd32cbfa0cdd7f48ca094972ca47727cd3cd82c_original.jpeg" alt="" srcset="" style="
border-radius: 50%;
height: 7.5rem;
width: 7.5rem;
object-fit: contain;" />
</div>
Add this to your CSS:
#artiststhumbnail a img {
display: block;
margin-left: auto;
margin-right: auto;
}
Just referencing a child element which in that case is the image.
To center an image horizontally, this works:
<p style="text-align:center"><img src=""></p>
Put the picture inside a newDiv.
Make the width of the containing div the same as the image.
Apply margin: 0 auto; to the newDiv.
That should center the div within the container.
Use positioning. The following worked for me... (Horizontally and Vertically Centered)
With zoom to the center of the image (image fills the div):
div{
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
Without zoom to the center of the image (image does not fill the div):
div{
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
Center a image in a div
/* standar */
div, .flexbox-div {
position: relative;
width: 100%;
height: 100px;
margin: 10px;
background-color: grey;
}
img {
border: 3px solid red;
width: 75px;
height: 75px;
}
/* || standar */
/* transform */
.transform {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
/* || transform */
/* flexbox margin */
.flexbox-div {
display: -webkit-flex;
display: flex;
background-color: lightgrey;
}
.margin-img {
margin: auto;
}
/* || flexbox margin */
/* flexbox justify align */
.flexbox-justify {
justify-content: center;
}
.align-item {
align-self: center;
}
/* || flexbox justify align */
<h4>Using transform </h4>
<div>
<img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
<h4>Using flexbox margin</h4>
<div class="flexbox-div">
<img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
<h4>Using flexbox justify align</h4>
<div class="flexbox-div flexbox-justify">
<img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
I have tried a few ways. But this way works perfectly for me
<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />
Put an equal pixel padding for left and right:
<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">
A responsive way to center an image can be like this:
.center {
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
}
you can align your content using flex box with minimum code
HTML
<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px">
</div>
CSS
.image-container{
width:100%;
background:green;
display:flex;
.image-container{
width:100%;
background:green;
display:flex;
justify-content: center;
align-items:center;
}
<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px">
</div>
js fiddle link https://jsfiddle.net/7un6ku2m/
If you have to do this inline (such as when using an input box),
here is a quick hack that worked for me: surround your (image link in this case)
in a div with style="text-align:center"
<div style="text-align:center">
<a title="Example Image: Google Logo" href="https://www.google.com/"
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>
<h6><strong>This text will also be centered </strong></h6>
</div> /* ends centering style */
.document {
align-items: center;
background-color: hsl(229, 57%, 11%);
border-radius: 5px;
display: flex;
height: 40px;
width: 40px;
}
.document img {
display: block;
margin: auto;
}
<div class="document">
<img src="./images/icon-document.svg" alt="icon-document" />
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
/*-------------------important for fluid images---\/--*/
overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
overflow-y: scroll;
margin-left:0px;
margin-top:0px;
/*-------------------important for fluid images---/\--*/
}
.thirddiv{
float:left;
width:100vw;
height:100vh;
margin:0px;
background:olive;
}
.thirdclassclassone{
float:left; /*important*/
background:grey;
width:80vw;
height:80vh; /*match with img height bellow*/
margin-left:10vw; /* 100vw minus "width"/2 */
margin-right:10vw; /* 100vw minus "width"/2 */
margin-top:10vh;
}
.thirdclassclassone img{
position:relative; /*important*/
display: block; /*important*/
margin-left: auto; /*very important*/
margin-right: auto; /*very important*/
height:80vh; /*match with parent div above*/
/*--------------------------------
margin-top:5vh;
margin-bottom:5vh;
---------------------------------*/
/*---------------------set margins to match total height of parent di----------------------------------------*/
}
</style>
</head>
<body>
<div class="thirddiv">
<div class="thirdclassclassone">
<img src="ireland.png">
</div>
</body>
</html>
##Both Vertically and Horizontally center of the Page
.box{
width: 300px;
height: 300px;
background-color: #232532;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Style.css
img#center-img{
display: block;
margin: auto;
}
Html
<html>
<body>
<div>
<img src='pic.png' id='center-img'>
</div>
</body>
</html>
To center a image use this css. You have to give width at first of the image.
img{
width: 300px;
position: fixed;
left0;
right:0;
}
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.
I have two images that I want to place side by side with hover effects. I've managed to get them side by side...but I'd like the images centered under the logo image.
CSS:
a.btn1 {
display: inline-block;
float: left;
width: 332px;
height: 85px;
cursor: pointer;
background-image: url(images/bttn_model.png);
text-indent: -9999em;
margin:
}
a.btn1:hover {
background-image: url(images/bttn_model_over.png);
}
a.btn2{
display: inline-block;
width: 332px;
height: 85px;
cursor: pointer;
background-image: url(images/bttn_photographers.png);
text-indent: -9999em;
}
a.btn2:hover {
background-image: url(images/bttn_photographers_over.png);
}
}
HTML:
<body>
<div align="center">
<p> </p>
<p><img src="images/logo.gif" width="618" height="85" /></p>
</div>
<p> </p>
<div align="center">Models
<div align="center">Photographers
</div>
</div>
<p> </p>
</body>
</html>
You should wrap the 2 images in one div, so you can center that div with the following class
.centerDiv
{
width: 50%;
margin: 0 auto;
}
One possible way to do what you want is following.
HTML
<div class="logo">
<img src="images/logo.gif" width="618" height="85" />
</div>
<div class="pictures">
Models
Photographers
</div>
CSS
.logo {
text-align: center;
}
.pictures {
text-align: center;
}
.pictures a {
cursor: pointer;
display: inline-block;
width: 332px;
height: 85px;
text-indent: -9999em;
}
.btn1 {
background-image: url('images/bttn_model.png');
}
.btn1:hover {
background-image: url('images/bttn_model_over.png');
}
.btn2{
background-image: url('images/bttn_photographers.png');
/* next margin-left is to fix the space between */
/* images that because of the inline-block */
/* margin-left: -4px; */
}
.btn2:hover {
background-image: url('images/bttn_photographers_over.png');
}
Using attributes like align is not nice practise nowdays. For this things there is solution in CSS.
Using display: inline-block and float: left is not needed in this case, while it is in one line already with display.
If you wanted to use <p> </p> instead of margin & padding, that put them back, but better practise is to stick with margin & padding