I am new to HTML and CSS and I am trying to learn as I develop on a project.
I am trying to make an image grid and when the mouse hovers the image an overlay text appears. The problem is that the image inside the container has some lateral gaps that I can't get remove: https://i.stack.imgur.com/weDkb.png
The HTML code is as follows:
<!-- language: lang-html -->
<body>
<h1>
Art Page!
</h1>
<div class="row">
<div class="column">
<a href="#">
<div class="container">
<img src="images/owl.jpg" class="image">
<div class="overlay">
<div class="text">Example 1</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="#">
<div class="container">
<img src="images/girl_freedom.jpg" class="image">
<div class="overlay">
<div class="text">Example 2</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="#">
<div class="container">
<img src="images/soldiers.jpg" class="image">
<div class="overlay">
<div class="text">Example 3</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="#">
<div class="container">
<img src="images/brain.jpg" class="image">
<div class="overlay">
<div class="text">Example 4</div>
</div>
</div>
</a>
</div>
</div>
</body>
and the css style sheet is:
<!-- language: lang-css -->
body {
background-color: #fff;
padding: 0;
margin: 0;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
flex: auto;
}
.column img {
vertical-align: middle;
}
.container {
position: relative;
max-width: 100%;
}
.image {
display: block;
height: 100%;
max-width: 100%;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: black;
}
.container:hover .overlay {
opacity: 0.5;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
Thanks in advance for your help!
Best regards
Or you have to equalize the image size with the template using the code below
change this
.image {
display: block;
height: 100%;
max-width: 100%;
}
to this:
.image {
display: block;
height: 100%;
width: 100%;
}
demo in jsfiddle
Or you have to put the image and the transparent layer inside a div and set Position: Relative.
body {
background-color: #fff;
padding: 0;
margin: 0;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
flex: auto;
text-align: center;
}
.column img {
vertical-align: middle;
}
.container {
position: relative;
max-width: 100%;
}
.image {
display: block;
height: 100%;
width: 100%;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: black;
}
.container:hover .overlay {
opacity: 0.5;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.img-container {
display: inline-table;
margin: auto;
position: relative;
}
<h1>
Art Page!
</h1>
<div class="row">
<div class="column">
<a href="#">
<div class="container">
<div class="img-container">
<img src=" https://www.w3schools.com/bootstrap/ny.jpg" class="image">
<div class="overlay">
<div class="text">Example 1</div>
</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="#">
<div class="container">
<div class="img-container">
<img src=" https://www.w3schools.com/bootstrap/ny.jpg" class="image">
<div class="overlay">
<div class="text">Example 1</div>
</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="#">
<div class="container">
<div class="img-container">
<img src=" https://www.w3schools.com/bootstrap/ny.jpg" class="image">
<div class="overlay">
<div class="text">Example 1</div>
</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="#">
<div class="container">
<div class="img-container">
<img src=" https://www.w3schools.com/bootstrap/ny.jpg" class="image">
<div class="overlay">
<div class="text">Example 1</div>
</div>
</div>
</div>
</a>
</div>
</div>
Related
I am working on an image gallery and want have the image's container be completely centered on the page, but the images are left aligned.
This is my desired output:
However, when I try to do a text-align: center on the container(id: gallery) I am getting the images displayed like this:
I tried following suit with a previous stack overflow question: CSS: Center block, but align contents to the left
and wrap the images in another div then align it with display: inline-block; and text-align: left; but the images just seem to align left on the entire page:
What can I do to accomplish my desired output?
HTML
<div id="gallery">
<div id="images">
<div class="container">
<a href="images/gallery/image1.jpg" data-lightbox="mygallery">
<img src="images/gallery/image1.jpg">
<div class="overlay">
<img src="images/magnify.png">
</div>
</a>
</div>
<div class="container">
<a href="images/gallery/image2.jpg" data-lightbox="mygallery">
<img src="images/gallery/image2.jpg">
<div class="overlay">
<img src="images/magnify.png">
</div>
</a>
</div>
</div>
</div>
CSS
#gallery{
text-align: center;
}
#images{
display: inline-block;
text-align: left;
}
img{
width: 300px;
cursor: pointer;
}
.overlay {
position: absolute;
right: 0;
left: 0;
cursor: pointer;
visibility: hidden;
color: transparent;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
transition: all ease-in .3s;
}
.overlay > img{
height: 50%;
width: 50%;
top: 50%;
visibility: hidden;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
.overlay:hover > img{
visibility: visible;
}
.container {
position: relative;
display: inline-block;
margin: 5px;
}
.container:hover .overlay {
visibility: visible;
opacity: .6;
background: black;
color: white;
}
How about styling the image wrapper .images like
.images {
width:80%;
margin:0 auto;
text-align:left;
}
this works
body{
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: center;
align-items: center;
}
section{
height:400px;
width:400px;
background:grey;
}
img {
margin:48px;
}
<section>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
</section>
Give your #gallery div a max-width, text-align: center, and margin:auto, then put your header in another div inside the #gallery, but outside the #images. Then put text-align: left on your #images div.
See example below:
#gallery {
text-align: center;
max-width: 420px;
margin: auto;
}
img {
width: 100px;
cursor: pointer;
}
.container {
display: inline-block;
}
#images {
text-align: left
}
<div id="gallery">
<div id="header">
<h1>Header</h1>
</div>
<div id="images">
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=d42">
<img src="http://thecatapi.com/api/images/get?id=d42">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=21o">
<img src="http://thecatapi.com/api/images/get?id=21o">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=49e">
<img src="http://thecatapi.com/api/images/get?id=49e">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=13v">
<img src="http://thecatapi.com/api/images/get?id=13v">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=6e6">
<img src="http://thecatapi.com/api/images/get?id=6e6">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=4bf">
<img src="http://thecatapi.com/api/images/get?id=4bf">
</a>
</div>
</div>
</div>
HTML
<h2>HEADER</h2>
<div class="container">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
CSS
h2 {
text-align: center;
}
.container {
float: left;
}
img {
border: medium solid black;
width: 200px;
height: 350px;
margin: 5% 2%;
}
I would like to know how I can add a responsive centered text element to my <a> element? It shouldn't be affected by the overlay color. Please let me know if there is a clean alternative way of the extra overlay div. I am using Bootstrap 4.
http://jsfiddle.net/or74zoy0/1
HTML
<div class="container">
<div class="row">
<div class="col-md-3">
<a class="item" href="#">
<div class="image">
<img src="https://lorempixel.com/output/technics-q-c-640-480-4.jpg" alt="" />
<div class="overlay"></div>
</div>
</a>
</div>
</div>
</div>
CSS
.image { position: relative;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; background-color: rgba(0,0,0,0.5);}
This is one way to do it:
HTML
<div class="container">
<div class="row">
<div class="col-md-3">
<a class="item" href="#">
<div class="image">
<img src="https://lorempixel.com/output/technics-q-c-640-480-4.jpg" alt="" />
<div class="overlay"></div>
</div>
<span class="title">Centered Text</span>
</a>
</div>
</div>
</div>
CSS
.image { position: relative;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; background-color: rgba(0,0,0,0.5);}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Or solving it with bootstrap classes:
HTML
<div class="container">
<div class="row">
<div class="col-md-3">
<a class="item" href="#">
<div class="image">
<img src="https://lorempixel.com/output/technics-q-c-640-480-4.jpg" alt="" />
<div class="overlay"></div>
</div>
<div class="title d-flex justify-content-center align-items-center">
Centered Text
</div>
</a>
</div>
</div>
</div>
CSS
.image { position: relative;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; background-color: rgba(0,0,0,0.5);}
.title { position: absolute; top: 0; left: 0; right:0; bottom:0;}
I tried to get an example from w3schools running, but in my case there are multiple images. The overlay is displayed for the entire window instead of the 1st image (I plan to do this for all images later).
Here is my code:
.flex-container {
display: flex;
}
.col1 {
position: relative;
display: block;
}
.img1-wrap {
display: block;
}
.image {
display: block;
/*width: 100%;*/
height: auto;
}
.overlay {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
/*width: 100%;*/
height: 20%;
transition: .5s ease;
}
.img1-wrap:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="flex-container">
<div class="col col-1">
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image2">
</div>
<div class="col col-3">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image3">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image4">
</div>
</div>
Add position:relative to .img1-wrap and give a try.
When you make a element positioned absolute, Make sure its parent
is positioned relative
CSS
.img1-wrap {
display: block;
position: relative;
}
Is this what you want to achive Working Fiddle
Hope this helps..
It seems you are not using positioning the right way. Use relative for each element block with the text container.
You should restructure your HTML & CSS in such way:
.flex-container {
position: relative;
display: flex;
}
.img1-wrap {
position: relative;
overflow: hidden;
width: 200px;
}
.image {
width: 100%;
}
.overlay {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
/*width: 100%;*/
height: 20%;
transition: .5s ease;
}
.img1-wrap:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="flex-container">
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
Hope this helps and this is what you're trying to achieve.
I am trying to center a group (a table with 3x3) of pictures to the center of the webpage, I manage to do it before adding image overlay to it. But since I added image overlay, the images are appearing on top left of the webpage. How do i group them and center them, also how am I supposed to get the image location so that when I set the image overlay, it goes to the specific picture as each picture will have different image overlay text.
CSS
.container {
position: relative;
width: 100px;
height: 100px;
}
.image {
display: block;
width: 100px;
height: 100px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: red;
font-size: 20px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
HTML
<div style="text-align:center">
<div class="container">
<img src="wheel1.jpg" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="wheels2.jpg" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="wheel3.jpg" class="image"">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
`
You could center it using flexbox. Change your main div
<div style="text-align-center;">
......
</div>
to
<div style="display: flex; flex-direction: column;align-items: center;">
.....
</div>
And it should work.
.wrapper{
display: flex;
flex-direction: row;
justify-content: center;
}
.container {
position: relative;
width: 100px;
height: 100px;
}
.image {
display: block;
width: 100px;
height: 100px;
border: 1px solid red;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: red;
font-size: 20px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="wrapper">
<div class="container">
<div class="image"></div>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<div class="image"></div>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<div class="image"></div>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
Here is the fiddle.
I'm creating a thumbnail image gallery. I'm having it where you hover over the image and you see the title and description. I want the title and description centred inside the hover div.
Because I have positioned the hover div as absolute, I'm having trouble using the usual table methods to vertically align. Whenever I resized the viewport, the text wouldn't be in the centre anymore.
Any help with this would be appreciated.
Here is the jsfiddle example: http://jsfiddle.net/Forresty/2snra4tL/1/
Here is the code:
HTML:
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg" >
<div class="item_hover">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</a>
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</a>
<a class="work_item_link_no_margin" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</a>
CSS:
.work_item_link {
position: relative;
width: 32%;
height: auto;
float: left;
margin-right: 2%;
//overflow: hidden;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.work_item_link_no_margin {
position: relative;
width: 32%;
height: auto;
float: left;
//overflow: hidden;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.item_hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
opacity: 0;
transition: all 1s;
}
I answered my own question.
The final code can be seen here: http://jsfiddle.net/Forresty/2snra4tL/4/
I added another div as a table containing the div that contains the text.
Thanks again.
HTML:
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg" >
<div class="item_hover">
<div class="center">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</div>
</a>
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="center">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</div>
</a>
<a class="work_item_link_no_margin" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="center">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</div>
</a>
SCSS:
.work_item_link {
position: relative;
width: 32%;
height: auto;
float: left;
margin-right: 2%;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.work_item_link_no_margin {
position: relative;
width: 32%;
height: auto;
float: left;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.item_hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
opacity: 0;
transition: all 1s;
}
.center{
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.item_description{
display: table-cell;
vertical-align: middle;
p, h4{
margin: 0;
}
}
Here is how you align your text:
Horizontally:
.item_description p,
.item_description h4{
text-align:center;
}
Vertically:
.item_description{
position: relative;
margin-top: 50%;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
Fixed Fiddle
fff...
im too late. i was hoping to be able to provide my first answer...
i made a nice fiddle for you.
my technique:
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: relative;