I display an image which changing by another image if the mouse is over it (hover). This works perfectly, but the image is not centered. Here is the code I using:
HTML:
<figure><a><img class="hover" src="nachher.jpg" alt="" width="60%" />
<img class="nohover" src="vorher.jpg" alt="" width="60%/" /></a>
<figcaption>some text here</figcaption></figure
CSS:
img.nohover {border:0;}
img.hover {border:0;display:none;}
a:hover img.hover {display:inline;}
a:hover img.nohover {display:none;}
The question is: How can i center the image(s)?
I would move width: 60% to the figure, then make the images width: 100%. Then you can
img.nohover {border:0;}
img.hover {border:0;display:none;}
a:hover img.hover {display:inline;}
a:hover img.nohover {display:none;}
figure {
width: 60%;
margin: auto;
}
img {
width: 100%;
}
<figure>
<a><img class="hover" src="https://i.stack.imgur.com/2C22p.jpg" alt="" />
<img class="nohover" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" /></a>
<figcaption>some text here</figcaption>
</figure>
use margin: auto on figure to center it horizontally.
Related
Thanks in advance for any insight any of you provide. I'm not finding the exact answer that I need.
I have two rows of images but want one atop the other
I tried this:
Display list items on top of each other
but it doesn't seem to fix my problem.
Here's my HTML/CSS:
<ul class="north-showcase">
<li>
<figure class="before">
<img src="resources/img/170Northwoods/Bath.jpg" alt="Bathroom">
</figure>
<figure class="after">
<img src="resources/img/170Northwoods/WholeHouse.jpg" alt="Bathroom">
</figure>
</li>
<li>
<figure class="before">
<img src="resources/img/170Northwoods/Bath2.jpg" alt="Second Bathroom">
</figure>
<figure class="after">
<img src="resources/img/170Northwoods/Kitchen.jpg" alt="Second Bathroom">
</figure>
</li>
<li>
<figure class="before">
<img src="resources/img/170Northwoods/Kitchen.jpg" alt="">
</figure>
<figure class="after">
<img src="resources/img/170Northwoods/Bath2.jpg" alt="">
</figure>
</li>
<li>
<figure class="before">
<img src="resources/img/170Northwoods/WholeHouse.jpg" alt="">
</figure>
<figure class="after">
<img src="resources/img/170Northwoods/Bath.jpg" alt="">
</figure>
</li>
</ul>
Here's my CSS:
.north-showcase {
list-style: none;
width: 100%;
}
.north-showcase li {
display: block;
float: left;
width: 25%;
}
.before {
width: 100%;
margin: 0%;
z-index: 1;
}
.before img {
width: 100%;
height: auto;
}
.after {
width: 100%;
margin: 0%;
z-index: 2;
}
.after img {
width: 100%;
height: auto;
}
First, create an .img-wrapper div to contain the top and bottom pictures for each list item
<li>
<div class="img-wrapper">
<figure class="before">
<img src="resources/img/170Northwoods/Bath.jpg" alt="Bathroom">
</figure>
<figure class="after">
<img src="resources/img/170Northwoods/WholeHouse.jpg" alt="Bathroom">
</figure>
</div>
</li>
CSS:
.img-wrapper {
position: relative;
}
.after, .before {
position: absolute;
}
.north-showcase li {
display: inline-block;
width: 24%;
}
working demo: https://jsfiddle.net/kkdaily/6cwh3rkL/
NOTE: the display: inline-block property is causing extra spacing to appear between the list items. There are hacky solutions for this which include removing the end </li> tags. More info here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
I'm sorry if this is a repost, but this is something I've been researching on here for awhile now and I can't seem to come up with the right answer. I'm trying to get these images to appear in the exact center of the page with the captions underneath, but they keep going on the left side of the page.
Here's my html
<figure>
<img src="apple.jpg" alt='apple/>
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="apple.jpg" alt='apple'/>
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="apple.jpg" alt='apple'/>
<figcaption>Apple</figcaption>
</figure>
And the css
figure{
display: inline-block;
margin: 0 auto;
}
figure img{
vertical-align: top;
}
figure figcaption{
text-align: center;
}
Here's what I see:
Thanks in advance. I greatly appreciate any help.
You want them horizontally or vertically aligned?
vertically:
figure {
display: block;
text-align: center
}
horizontally:
body {
text-align: center;
}
figure {
display: inline-block;
text-align: center
}
Try wrapping your elements with Div container to control the position.
This is a hacky way of doing it. But you can adjust the .center class to get it where you want on the page, i.e. adjust the right: and/or left properties.
.container {
position: center;
width: 100%;
}
.center {
position: absolute;
right: 30%;
width: 300px;
background-color: #b0e0e6;
}
figure{
display: inline-block;
margin: 0 auto;
}
figure img{
vertical-align: top;
}
figure figcaption{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<figure>
<img src="apple.jpg" alt='apple/>
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="apple.jpg" alt='apple'/>
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="apple.jpg" alt='apple'/>
<figcaption>Apple</figcaption>
</figure>
</div>
</div>
html
<figure>
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<figcaption>Apple</figcaption>
</figure>
css
figure{
width:30%;
display:inline-block;
margin:1%;
margin-left:1.5%;
}
figure img{
width:100%;
display:block;
margin-left:auto;
margin-right:auto;
}
figure figcaption{
text-align: center;
}
https://jsfiddle.net/Ljdxnwot/3/
Update
OP has clarified that the images are to be side-by-side and centered vertically as well.
Place everything in a div or section (any block element will do)
I used a section with the following styles:
display: table; will make it act like a table
height: 100vh; will make it as tall as the viewport (your screen)
margin: 0 auto; auto will adjust left and right until both are equal
Added the following to the figures:
display: table-cell; will make it act like a table cells
vertical-align : middle; will actually work on table cells
Updated Snippet
section {
display: table;
height: 100vh;
margin: 0 auto;
}
figure {
vertical-align : middle;
display: table-cell;
margin: 0 auto;
text-align: center;
}
figure img {
width: 20em;
}
figure figcaption {
text-align: center;
}
<section>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
</section>
- There's a "'" (single quote) missing on the first alt
Change figure to block or remove it as I did since figure is display: block by default.
Add text-align: center to figure
Note: the original image was off center (of course), so I edited it to be symmetrical.
See snippet below.
Snippet
figure {
margin: 0 auto;
text-align: center;
}
figure img {
vertical-align: top;
width: 20em;
}
figure figcaption {
text-align: center;
}
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
I'd like a figcaption to be next to a image in the middle of this image. How can i do this? I have tried like this:
<figure>
<img src="Pic1" style="width:60%; height:auto; float:right" />
<figcaption class="title" style="vertical-align:middle">xxx</figcaption>
</figure>
but the caption is still on the top of the image.
You can make your figure display as flex, and then use auto margins to center the caption.
figure {
display: flex;
}
figure figcaption {
margin: auto 10px;
}
<figure>
<img src="https://picsum.photos/200">
<figcaption>A random picture</figcaption>
</figure>
Try this solution:
figure {
display:table;
}
figure figcaption.title {
display:table-cell;
vertical-align:middle;
}
figure img {
display:table-cell;
width:60%;
}
<figure>
<figcaption class="title">xxx</figcaption>
<img src="http://placehold.it/250x300"/>
</figure>
I've got a website, based on wordpress and the responsive design "Mystile".
I use the following html code to display three pictures side by side:
<div style="position: absolute;"><img src="myimgsrc" alt="" /></div>
<div style="position: absolute; margin-left: 250px;"><img src="myimgsrc" alt="" /></div>
<div style="position: absolute; margin-left: 500px;"><img src="myimgsrc" alt="" /></div>
This works flawlessly on the computer.
As you can see on the picture.
But on a mobile device it looks terrible.
Like this:
What can should I do?
Thank you very much.
The easiest is just to display the images inline. They will then wrap under each other if there isn't enough space to fit beside one another:
html, body {margin:0;}
.hmm a {display:inline-block; margin:10px 0 0 10px;}
.hmm a img {display:block; margin:0;}
<div class="hmm"><img src="http://www.placehold.it/240x50" alt="placeholder" /><img src="http://www.placehold.it/240x50" alt="placeholder" /><img src="http://www.placehold.it/240x50" alt="placeholder" /></div>
If you want to get a little more advanced you can use media-queries to change the style for different sized viewports:
html, body {margin:0;}
.hmm a {display:inline-block; margin:10px 0 0 10px;}
.hmm a img {display:block; margin:0;}
#media all and (max-width: 750px) {
.hmm a:first-of-type img {width:490px;}
}
#media all and (max-width: 510px) {
.hmm a {
display: block;
margin:10px;
}
.hmm a img {
width:100%!important;
}
}
<div class="hmm"><img src="http://www.placehold.it/240x50" alt="placeholder" /><img src="http://www.placehold.it/240x50" alt="placeholder" /><img src="http://www.placehold.it/240x50" alt="placeholder" /></div>
^ Go 'full-page' and resize to see this one working.
Link to website: foxweb.marist.edu/users/kf79g/contact.php
This is it. The last step I have to fix before deploying my website and finally finishing it. But I do not know how to resolve this issue. On medium and small screens, I am having a lot of trouble with my social icons. I want the whole thing on medium and small devices to be centered and 100% responsive. I have tried making a container to make them responsive, but no matter what I do, it always looks messy in IE 7-10. The icons are moving to the next line instead of staying on one line evenly as the page width gets smaller and smaller. I tried adjusting the margins, but that didn't helps since that ruined my center attribute for the whole page. I simply do not know what to do or how to fix this issue. If anybody can help me I would really appreciate it.
Visual representation of problem (IE):
http://tinypic.com/r/nla7eq/5
What I want it to look like (modern browsers):
http://tinypic.com/view.php?pic=vp9gg7&s=5
HTML:
<h2> Social networks </h2><br/>
<div id = "center_icons">
<img src="images/facebook.png" alt="facebook" style="margin:1px;">
<img src="images/google-plus.png" alt="google plus" style="margin:1px;">
<img src="images/linkedin.png" alt="linkedin" style="margin:1px;">
<img src="images/github.png" alt="github" style="margin:1px;">
</div>
<br/>
</div>
</section>
Main CSS:
#details_section {
max-width:100%;
float:left;
margin-right:20px;
}
Large screens:
#details_section {
width:320px;
}
Medium screens:
#center{
width: 450px;
display: block;
margin-left: auto;
margin-right: auto;
}
#center_icons{
width: 213px; /*this value is changing for IE and chrome*/
display: block;
margin-left: auto;
margin-right: auto;
}
Small screens:
#center{
width: 220px;
display: block;
margin-left: auto;
margin-right: auto;
max-width:100%;
}
#center_icons{
width: 214px; /*this value is changing for IE and chrome*/
display: block;
margin-left: auto;
margin-right: auto;
max-width:100%;
}
You could also remove spaces between "=", and use " instead of '.
<div id = "center">
<div id='details_section'>
should be
<div id="center">
<div id="details_section">
You should also indicate the image size somewhere.
<div id="container">
<div id="center_icons">
<img src="images/facebook.png" alt="facebook" width="40" height="40">
<img src="images/google-plus.png" alt="google plus" width="40" height="40">
<img src="images/linkedin.png" alt="linkedin" width="40" height="40">
<img src="images/github.png" alt="github" width="40" height="40">
</div>
</div>
And a simpler CSS would be:
div {border: 1px red solid;padding: 5px} /*this is only for us to see it when testing*/
#container {
text-align:center;
}
#center_icons{
width: 214px; /*this value is changing for IE and chrome*/
display: block;
margin-left: auto;
margin-right: auto;
max-width:100%;
}
Check it working here: http://codepen.io/anon/pen/mAjzo
Just use <center> </center> in code instead of Div id "center".
you need to change your CSS properties just measure your screen co-ordinates and put it in margin or you can use HTML5 to solve this problem.