I'm trying to make the paragraph texts appear when I hover over each of the images. The text should be in the center of the image. I'm not entirely sure how I can achieve this.
Another issue I have is that if I set top: 0 and remove the transform, the text isn't actually positioned at top: 0, there is some margin between the top and where the text is.
Codepen below:
https://codepen.io/uhzyrneh/pen/WNvOaWB
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(4, 25%);
background-color: black;
}
.container div {
position: relative;
width: 100%;
overflow: hidden;
}
.container div img {
width: 100%;
transition: 0.4s;
transform: scale(1.1);
opacity: 0.7;
}
.container div img:hover {
transform: scale(1.03);
opacity: 1;
}
.container div p {
color: white;
position: absolute;
top: 0;
left: 50%;
font-size: 50px;
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="">
<img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
<p>Test</p>
</div>
<div class="">
<img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
<p>Test2</p>
</div>
<div class="">
<img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
</div>
</body>
</html>
The rule you're looking for is:
.container div:hover p {
display: inline;
}
And hide the text to begin with by adding display: none; to .container div p.
Also, the text is at the top of the div. If you highlight it, you can see it's right up against the top.
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(4, 25%);
background-color: black;
}
.container div {
position: relative;
width: 100%;
overflow: hidden;
}
.container div img {
width: 100%;
transition: 0.4s;
transform: scale(1.1);
opacity: 0.7;
}
.container div img:hover {
transform: scale(1.03);
opacity: 1;
}
.container div p {
color: white;
position: absolute;
top: 0;
left: 50%;
font-size: 50px;
opacity: 1;
display: none;
}
.container div:hover p {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="">
<img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
<p>Test</p>
</div>
<div class="">
<img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
<p>Test2</p>
</div>
<div class="">
<img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
</div>
</body>
</html>
You could use like this:
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(4, 25%);
background-color: black;
}
.container div {
position: relative;
width: 100%;
overflow: hidden;
}
.container div img {
width: 100%;
transition: 0.4s;
transform: scale(1.1);
opacity: 0.7;
}
.container div img:hover {
transform: scale(1.03);
opacity: 1;
}
.container div p {
color: #fff;
position: absolute;
top: 0;
left: 50%;
font-size: 50px;
opacity: 1;
}
.container div a:hover::after{
content: attr(title);
display:block;
position:absolute;
width:100%;
height:200px;
top:50px;
left:0;
z-index:1;
opacity: 1;
font-size: 50px;
color:#fff;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="">
<img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
</div>
</body>
</html>
Related
I am relatively new to css/html.
I have been browsing about this issue for a while, but did not find a solution.
The issue is that, if I use the below code (that uses Bulma), the clickable area when hovering on img3.jpg is the entire block starting at the first <div class="columns is-multiline">. I suspect the issue might be some clash between Bulma is-column / is-multiline, and the overlay CSS definition I provided?
<style type="text/css">
ul {
list-style: none;
padding: 10px 10px 10px 30px
}
ul li {
font-size: 120%;
margin-left: 10px;
list-style-type: circle;
}
</style>
<style>
.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
<div class="columns is-multiline">
<div class="column is-9">
<div class="content">
<h3> About us </h3>
<hr>
<p align="left" style="font-size:120%;">
some content ...
</p>
</div>
<div class="columns is-multiline">
<div class="column is-4">
<img src="/images/img1.jpg" alt="" class="image"/>
</div>
<div class="column is-4">
<img src="/images/img2.jpg" alt="" class="image"/>
</div>
<div class="column is-4">
<div class="container">
<img src="/images/img3.jpg" alt="" class="image"/>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
</div>
<p align="left" style="font-size:120%;">
some text ...
<ul>
<li>
item 1
<a href="url1">
<b>link</b>
</a>
</li>
<li>
item2
<a href="url2">
<b>link</b></a>
</li>
</ul>
</p>
</div>
<div class="column is-3">
{% include latest-posts.html %}
</div>
</div>
<hr>
try this document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<title>Document</title>
<style>
body {
padding-top: 2em;
}
ul {
list-style: none;
padding: 10px 10px 10px 30px
}
ul li {
font-size: 120%;
margin-left: 10px;
list-style-type: circle;
}
.container {
position: relative;
width: 100%;
}
.columns {
display: flex;
}
.image {
display: block;
width: 100%;
max-width: 320px;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.test {
position: absolute;
left: 0;
border-bottom: green solid;
font-size: .5em;
font-weight: bold;
}
.test-top {
top: 0;
}
.test-bottom {
bottom: 0;
}
</style>
</head>
<body>
<div class="columns is-multiline">
<div class="column is-9">
<div class="content">
<h3> About us </h3>
<hr>
<p style="font-size:120%; text-align:left">
some content ...
</p>
</div>
<div class="columns is-multiline">
<p class="test test-top">start columns / is-multiline</p>
<div class="column is-4">
<img src="https://w7.pngwing.com/pngs/715/287/png-transparent-number-1-number-1-creative-cartoon-thumbnail.png" alt="" class="image" />
</div>
<div class="column is-4">
<img src="https://w7.pngwing.com/pngs/664/223/png-transparent-number-2-number-number-2-image-file-formats-text-heart-thumbnail.png" alt="" class="image" />
</div>
<div class="column is-4">
<div class="container">
<img src="https://w7.pngwing.com/pngs/111/727/png-transparent-number-3-illustration-number-blue-crystal-number-three-teal-number-symbol-thumbnail.png" alt="" class="image" />
<div class="overlay">
<p class="test test-top">star overlay</p>
<div class="text">Hello World</div>
<p class="test test-bottom">end overlay</p>
</div>
</div>
</div>
<p class="test test-bottom">end columns / is-multiline</p>
</div>
<p style="font-size:120%; text-align:left">
some text ...
<ul>
<li>
item 1
<a href="url1">
<b>link</b>
</a>
</li>
<li>
item2
<a href="url2">
<b>link</b></a>
</li>
</ul>
</p>
</div>
<div class="column is-3">
{% include latest-posts.html %}
</div>
</div>
<hr>
</body>
</html>
I have been trying to create a simple CSS and HTML only image gallery slider. This is just for practice and it's really bugging me. When I click the arrow and the container slides over, it slides the full page including the navigation and footer to the left, is there any way I can improve this so that only the images slide over? I've tried messing with the overflow etc.
.galleryw {
display: grid;
grid-template-columns: repeat(3, 100%);
scroll-behavior: smooth;
margin-top: 5px;
padding-bottom: 40px
}
.galleryw section {
width: 100%;
position: relative;
display: grid;
transition: transform .2s;
grid-template-columns: repeat(6, auto);
margin: 10px 0;
}
.galleryw section .item {
padding: 0 2px;
transition: 250ms all;
}
.galleryw section .item:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
.galleryw section a {
position: absolute;
color: #000;
text-decoration: none;
font-size: 6em;
width: 40px;
padding: 10px;
text-align: center;
z-index: 1;
}
.galleryw section a:nth-of-type(1) {
top: 0;
bottom: 0;
left: 0;
}
.galleryw section a:nth-of-type(2) {
top: 1;
bottom: 0;
right: 0;
}
<div class="titles"><h2>ANIMALS<span class="red">.</span></h2></div>
<div class="galleryw">
<section id="section1">
‹
<div class="item">
<img src="img/zebs.png" /><br><h3>ZEBRA<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/toitles.png" /><br><h3>TURTLE<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/dolph.png" /> <br><h3>DOLPHIN<span class="red">.</span></h3> </div>
<div class="item">
<img src="img/re.png" /><br><h3>CHAMELEON<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/king.png" /><br><h3>KINGFISHER</h3>
</div>
<div class="item">
<img src="img/arc.png" /><br><h3>SNOWFOX<span class="red">.</span></h3>
</div>
›
</section>
<section id="section2">
‹
<div class="item">
<img src="img/king2.png" /><br><h3>KINGFISHER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/ele2.png" /><br><h3>ELEPHANT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/rac.png" /> <br><h3>RACCOON<span class="red">.</span></h3></div>
<div class="item">
<img src="img/rab.png" /><br><h3>RABBIT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/deer.png" /><br><h3>DEER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/pea.png" /><br><h3>PEACOCK<span class="red">.</span></h3>
</div>
›
</section>
</div>
You can try it here
http://kny.me/practice/gallery.html
Set overflow-x to auto on the gallery.
.galleryw {
display: grid;
grid-template-columns: repeat(3, 100%);
scroll-behavior: smooth;
margin-top: 5px;
padding-bottom: 40px;
overflow-x:auto;
}
.galleryw section {
width: 100%;
position: relative;
display: grid;
transition: transform .2s;
grid-template-columns: repeat(6, auto);
margin: 10px 0;
}
.galleryw section .item {
padding: 0 2px;
transition: 250ms all;
}
.galleryw section .item:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
.galleryw section a {
position: absolute;
color: #000;
text-decoration: none;
font-size: 6em;
width: 40px;
padding: 10px;
text-align: center;
z-index: 1;
}
.galleryw section a:nth-of-type(1) {
top: 0;
bottom: 0;
left: 0;
}
.galleryw section a:nth-of-type(2) {
top: 1;
bottom: 0;
right: 0;
}
<div class="titles"><h2>ANIMALS<span class="red">.</span></h2></div>
<div class="galleryw">
<section id="section1">
‹
<div class="item">
<img src="img/zebs.png" /><br><h3>ZEBRA<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/toitles.png" /><br><h3>TURTLE<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/dolph.png" /> <br><h3>DOLPHIN<span class="red">.</span></h3> </div>
<div class="item">
<img src="img/re.png" /><br><h3>CHAMELEON<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/king.png" /><br><h3>KINGFISHER</h3>
</div>
<div class="item">
<img src="img/arc.png" /><br><h3>SNOWFOX<span class="red">.</span></h3>
</div>
›
</section>
<section id="section2">
‹
<div class="item">
<img src="img/king2.png" /><br><h3>KINGFISHER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/ele2.png" /><br><h3>ELEPHANT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/rac.png" /> <br><h3>RACCOON<span class="red">.</span></h3></div>
<div class="item">
<img src="img/rab.png" /><br><h3>RABBIT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/deer.png" /><br><h3>DEER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/pea.png" /><br><h3>PEACOCK<span class="red">.</span></h3>
</div>
›
</section>
</div>
In order to scroll just the galleryw element and not the whole page you need to add overflow-x: hidden or overflow-x: auto to your galleryw css class.
The vertical jump is due to the implementation of the anchor links which will use the ScrollIntoView js function in order to get the section you want on the screen.
By default, the alignment is to the top-left corner so you need either to re-arrange your html or to use some javascript with some minor html tweaks.
I'm presenting you the second solution since is way faster and doesn't need you to change the whole layout of your page:
function init() {
let galleryw = document.getElementsByClassName("galleryw")[0];
let toSection1 = document.getElementsByClassName("toSection1");
let toSection2 = document.getElementsByClassName("toSection2");
for(const button of toSection1)
button.onclick = () => galleryw.scrollBy(-galleryw.offsetWidth, 0);
for(const button of toSection2)
button.onclick = () => galleryw.scrollBy(galleryw.offsetWidth, 0);
}
.galleryw {
overflow-x: hidden; /* ADDED */
display: grid;
grid-template-columns: repeat(3, 100%);
scroll-behavior: smooth;
margin-top: 5px;
padding-bottom: 40px
}
.galleryw section {
width: 100%;
position: relative;
display: grid;
transition: transform .2s;
grid-template-columns: repeat(6, auto);
margin: 10px 0;
}
.galleryw section .item {
padding: 0 2px;
transition: 250ms all;
}
.galleryw section .item:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
.galleryw section a {
position: absolute;
color: #000;
text-decoration: none;
font-size: 6em;
width: 40px;
padding: 10px;
text-align: center;
z-index: 1;
}
.galleryw section a:nth-of-type(1) {
top: 0;
bottom: 0;
left: 0;
}
.galleryw section a:nth-of-type(2) {
top: 1;
bottom: 0;
right: 0;
}
.toSection1,
.toSection2 {
cursor:pointer;/* ADDED */
}
<body onload = "init()">
<div class="titles"><h2>ANIMALS<span class="red">.</span></h2></div>
<div class="galleryw">
<section id="section1">
<a class="toSection2">‹</a><!-- Changed -->
<div class="item">
<img src="img/zebs.png" /><br><h3>ZEBRA<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/toitles.png" /><br><h3>TURTLE<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/dolph.png" /> <br><h3>DOLPHIN<span class="red">.</span></h3> </div>
<div class="item">
<img src="img/re.png" /><br><h3>CHAMELEON<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/king.png" /><br><h3>KINGFISHER</h3>
</div>
<div class="item">
<img src="img/arc.png" /><br><h3>SNOWFOX<span class="red">.</span></h3>
</div>
<a class="toSection2">›</a><!-- Changed -->
</section>
<section id="section2">
<a class="toSection1">‹</a><!-- Changed -->
<div class="item">
<img src="img/king2.png" /><br><h3>KINGFISHER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/ele2.png" /><br><h3>ELEPHANT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/rac.png" /> <br><h3>RACCOON<span class="red">.</span></h3></div>
<div class="item">
<img src="img/rab.png" /><br><h3>RABBIT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/deer.png" /><br><h3>DEER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/pea.png" /><br><h3>PEACOCK<span class="red">.</span></h3>
</div>
<a class="toSection1">›</a> <!-- Changed -->
</section>
</div>
</body>
I've just added the init function which get called onload and changed the anchors to normal <a> tags with a class = "toSection..." to recognize them.
The init function uses the scrollBy function on the galleryw so that when our "anchors" get clicked they just scroll the container and not the whole page.
I have a simple HTML site with CSS going, but i noticed a very very small line next to all my uploaded images that i use for links. I'm guessing that this is like a direction to img position, but it is so small that i can't actually see what it is. Anyone know what it is and how i get rid of it???
Picture or it didn't happen
the 4 images, with 1 working and 3 displaying the thingy
body {
background-image: url("Baggrund.png");
}
.title {
font-family: sans-serif;
color: #2E2E2E;
font-size: 50px;
margin-top: 100px;
font-weight: 1000;
}
.container {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
margin-left: 50px;
margin-top: 50px;
}
.image {
display: block;
width: 200px;
height: 200px;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
}
.overlayFade {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.overlay {
position: absolute;
opacity: 0;
transition: all .3s ease;
background-color: #008cba;
}
.container:hover .overlay,
.container:hover .overlayFade {
opacity: 1;
}
<div align="center">
<div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="Tips" class="image">
<div class="overlay overlayFade">
<div class="text">QGIS Tips & Tricks</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="KortInfo" class="image">
<div class="overlay overlayFade">
<div class="text">KortInfo</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="Metadata" class="image">
<div class="overlay overlayFade">
<div class="text">Metadatabasen</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="A-Z" class="image">
<div class="overlay overlayFade">
<div class="text">A-Z</div>
</div>
</div>
</div>
That is the underline that is present default in the anchor tag i just used text-decoration: none on the anchor tag and it is gone
I hope this is what you are looking for
body {
background-image: url("Baggrund.png");
}
.title {
font-family: sans-serif;
color: #2E2E2E;
font-size: 50px;
margin-top: 100px;
font-weight: 1000;
}
a
{
text-decoration:none;
}
.container {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
margin-left: 50px;
margin-top: 50px;
}
.image {
display: block;
width: 200px;
height: 200px;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
}
.overlayFade {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.overlay {
position: absolute;
opacity: 0;
transition: all .3s ease;
background-color: #008cba;
}
.container:hover .overlay,
.container:hover .overlayFade {
opacity: 1;
}
<div align="center">
<div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="Tips" class="image">
<div class="overlay overlayFade">
<div class="text">QGIS Tips & Tricks</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="KortInfo" class="image">
<div class="overlay overlayFade">
<div class="text">KortInfo</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="Metadata" class="image">
<div class="overlay overlayFade">
<div class="text">Metadatabasen</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="A-Z" class="image">
<div class="overlay overlayFade">
<div class="text">A-Z</div>
</div>
</div>
</div>
I have a grid layout of 4 photos and I need to set them to change when hovered over.
I am able to do this with one image using 'img:hover' and 'position: absolute;' however with multiple images, absolute positioning messes up the layout.
* {
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="column">
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSV7Xfy9xsIHJKQDzyNeuADyO-dTfLioo221t2-7m8ABCWDiaJKTQ" alt="Forest" style="width:100%">
</div>
</div>
<div class="row">
<div class="column">
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSV7Xfy9xsIHJKQDzyNeuADyO-dTfLioo221t2-7m8ABCWDiaJKTQ" alt="Forest" style="width:100%">
</div>
</div>
This is the code that I have so far and I have tried adding background(url...) in the CSS to no avail.
Any help/guidance would be much appreciated, many thanks!
Try with
<div class="row">
<div class="column">
<img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
<img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
</div>
<div class="column">
<img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Forest" style="width:100%">
<img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
</div>
</div>
<div class="row">
<div class="column">
<img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
<img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
</div>
<div class="column">
<img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Forest" style="width:100%">
<img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
</div>
</div>
CSS
*{
box-sizing:border-box;
}
.column {
float: left;
width: 50%;
padding: 5px;
position:relative;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
.hover-img{
display:none;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.column:hover img + img{
display:block;
}
https://jsfiddle.net/lalji1051/jhrpfq8u/4/
You can use Overlay using css. Please check this .. It will work for you
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">111<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
</div>
</div>
<div class="container">
<img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">222<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
</div>
</div>
<div class="container">
<img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">333<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
</div>
</div>
<div class="container">
<img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">444<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
</div>
</div>
</body>
</html>
The solution was to add the code suggested by Lalji above so that the style was applied to the images accordingly.
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body {
padding: 20px;
font-family: sans-serif;
background: #f2f2f2;
margin: 0;
}
img {
width: 100%;
height: auto;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
}
/* hover styles */
.location-listing {
position: relative;
}
.location-image {
line-height: 0;
overflow: hidden;
}
.location-image img {
filter: blur(0px);
transition: filter 0.3s ease-in;
transform: scale(1.1);
}
.location-title {
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
z-index: 1;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
background: rgba(90, 0, 10, 0.4);
color: white;
/* position the text in t’ middle*/
display: flex;
align-items: center;
justify-content: center;
}
.location-title:hover {
color: #ffffff;
text-decoration: none;
}
.location-listing:hover .location-title {
opacity: 1;
}
.location-listing:hover .location-image img {
filter: blur(2px);
}
/* for touch screen devices */
#media (hover: none) {
.location-title {
opacity: 1;
}
.location-image img {
filter: blur(2px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="child-page-listing">
<div class="grid-container">
<article id="3685" class="location-listing">
<a class="location-title" href="#">San Francisco</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</div>
</article>
<article id="3688" class="location-listing">
<a class="location-title" href="#">London</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
</div>
</article>
<article id="3691" class="location-listing">
<a class="location-title" href="#">New York</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
</div>
</article>
<article id="3694" class="location-listing">
<a class="location-title" href="#">Cape Town</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</div>
</article>
<article id="3697" class="location-listing">
<a class="location-title" href="#">Beijing</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/beijing-768x432.jpg" alt="beijing">
</div>
</article>
<article id="3700" class="location-listing">
<a class="location-title" href="#">Paris</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/paris-768x432.jpg" alt="paris">
</div>
</article>
</div>
<!-- end grid container -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have been trying to align four images that are to be displayed as the pic below. But I have been getting spaces after each row. How can I remove them?
Also is there a way that I can add a small thumbnail of the example image in the middle where all four images meet?
Along with this I am also trying to add captions over the images. Currently they are displayed below the images. How can I add them over the images?
<!DOCTYPE html>
<html>
<body alink="ff0000" bgcolor="ffffff" link="0000ff" text="000000" vlink="800080">
<div>
<div class="transbox" style="width: 50%; height=50%; float: left;">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" width="100%" />
<div style="position: relative; top:50%; left:45%; width:200px; height:25px">
<center>
<font color="Black" size="+2">Looking Into The Future</font>
</center>
</div>
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" width="100%" />
<div style=" text-align: center; vertical-align: middle;">
<center>
<font color="Black" size="+2">correct one</font>
</center>
</div>
</div>
</div>
<div>
<div class="transbox" style="width: 50%; height=50%; float: right;">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" width="100%" />
<div style="position: relative; top:50%; left:45%; width:200px; height:25px">
<center>
<font color="Black" size="+2">Looking Into The Future</font>
</center>
</div>
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" width="100%" />
<div style="position: relative; top:50%; left:45%; width:200px; height:25px">
<center>
<font color="Black" size="+2">Looking Into The Future</font>
</center>
</div>
</div>
</div>
</div></body>
</html>
JSFiddle link:
https://jsfiddle.net/8bL4qqr8/
body{
background-color:"ffffff";
}
.img-grid{
width: 50%;
float:left;
height:400px;
}
.img-grid img{
width :100%;
height:400px;
}
.caption{
display :none;
}
.img-grid:hover .caption{
text-align: center;
display:block;
background: #000;
color: #fff;
font-size:16px;
font-weight: bold;
margin-top: -100px;
padding: 10px;
}
<div class="transbox img-grid">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" />
<div class="caption">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox img-grid">
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" />
<div class="caption">
<p>Looking into the future</p>
</div>
</div>
<div class="transbox img-grid">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" />
<div class="caption">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox img-grid">
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" />
<div class="caption">
<p>Looking Into The Future</p>
</div>
</div>
You have a lot of deprecated stuff in your HTML. Don't use all this link, text stuff in your body. And not <center> or <font> otherwise. I made a simple snippet of the stuff your wanted with flexbox. I modified your code a bit. You can find browser support for flexbox here: http://caniuse.com/#search=flexbox
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.transbox {
position: relative;
flex: 1 0 50%;
width: 50%;
margin: 0;
padding: 0;
}
.transbox .thumbnail {
display: block;
position: absolute;
width: 100px;
height: 75px;
}
.transbox:nth-of-type(1) .thumbnail {
bottom: 0;
right: 0;
}
.transbox:nth-of-type(2) .thumbnail {
bottom: 0;
left: 0;
}
.transbox:nth-of-type(3) .thumbnail {
top: 0;
right: 0;
}
.transbox:nth-of-type(4) .thumbnail {
top: 0;
left: 0;
}
.transbox img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
float: left;
margin: 0;
padding: 0;
border: 0;
}
.transbox .text {
position: absolute;
width: 100%;
text-align: center;
color: #FFFFFF;
}
<div class="wrapper">
<div class="transbox">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" />
<div class="thumbnail">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" />
</div>
<div class="text">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox">
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" />
<div class="thumbnail">
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" />
</div>
<div class="text">
<p>Looking into the future</p>
</div>
</div>
<div class="transbox">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" />
<div class="thumbnail">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" />
</div>
<div class="text">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox">
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" />
<div class="thumbnail">
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" />
</div>
<div class="text">
<p>Looking Into The Future</p>
</div>
</div>
</div>
Hope this is what you were looking for
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
float: left;
border: 1px solid #333;
overflow: hidden;
width: 50%;
height: 50%
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
h1 {
color: white;
margin: 0;
padding: 20px;
}
html, body { height: 100%; padding: 0; margin: 0; }
</style>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div class="grow" style=" width: 40%; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -10%;">
<div>
<img class=" align:center"; src="https://s14.postimg.org/6ufixiest/Logo.jpg" width="100%" />
</div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/IT-1.jpg" alt="pepsi">
<div class="item-overlay top"></div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/RealEstate1.jpg" alt="pepsi" >
<div class="item-overlay top"></div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/VentureCapital-1.jpg" alt="pepsi" >
<div class="item-overlay top"></div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/Construction-1.jpg" alt="pepsi" >
<div class="item-overlay top"></div>
</div>
<div style=" width: 20%; position: fixed; top: 25%; left: 25%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Construction/Interior Design - Build to Live
</h1>
</div>
</div>
<div style=" width: 20%; position: fixed; top: 25%; left: 75%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Real Estate - Buy and Sell Potential Properties
</h1>
</div>
</div>
<div style=" width: 20%; position: fixed; top: 75%; left: 25%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Information Technology - Handling Potential IT Projects
</h1>
</div>
</div>
<div style=" width: 20%; position: fixed; top: 75%; left: 75%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Venture Capital - Finance for High Growth Potential
</h1>
</div>
</div>
<div class="grow" style=" width: 20%; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -10%;">
<div>
<img class=" align:center"; src="https://s14.postimg.org/6ufixiest/Logo.jpg" width="100%" />
</div>
</div>
</body>
</html>