I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
.imageWrapper {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
padding: 0px;
margin: 0px;
}
.imageWrapper img {
display: block;
width: 200px;
height: 200px;
padding: 0px;
margin: 0px;
}
.imageWrapper .cornerLink {
height:100px;
width:200px;
opacity: 0.7;
position: absolute;
bottom: 0px;
left: 0px;
margin: 0;
padding: 0;
color: #ffffff;
background-color: cadetblue;
text-decoration: none;
text-align: center;
transform: translateX(0) translateY(100px) translateZ(0);
transition-duration:0.3s;
transition-property: transform;
}
.imageWrapper:hover .cornerLink {
transform: translateX(0) translateY(0) translateZ(0);
}
a{
color: #ffffff;
text-decoration: none;
text-align: center;
}
<body>
<main>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
</main>
</body>
Add overflow:hidden; to your .imageWrapper class. Here's working code:
.imageWrapper {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
padding: 0px;
margin: 0px;
overflow:hidden;
}
.imageWrapper img {
display: block;
width: 200px;
height: 200px;
padding: 0px;
margin: 0px;
}
.imageWrapper .cornerLink {
height:100px;
width:200px;
opacity: 0.7;
position: absolute;
bottom: 0px;
left: 0px;
margin: 0;
padding: 0;
color: #ffffff;
background-color: cadetblue;
text-decoration: none;
text-align: center;
transform: translateX(0) translateY(100px) translateZ(0);
transition-duration:0.3s;
transition-property: transform;
}
.imageWrapper:hover .cornerLink {
transform: translateX(0) translateY(0) translateZ(0);
}
a{
color: #ffffff;
text-decoration: none;
text-align: center;
}
<body>
<main>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
</main>
</body>
Change this line transform: translateX(0) translateY(100px) translateZ(0); to transform: translateX(0) translateY(115px) translateZ(0);:
Add overflow:hidden to .imageWrapper to remove the space under images
.imageWrapper {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
padding: 0px;
margin: 0px;
overflow: hidden; /* Hides links when off image */
}
.imageWrapper img {
display: block;
width: 200px;
height: 200px;
padding: 0px;
margin: 0px;
}
.imageWrapper .cornerLink {
height: 100px;
width: 200px;
opacity: 0.7;
position: absolute;
bottom: 0px;
left: 0px;
margin: 0;
padding: 0;
color: #ffffff;
background-color: cadetblue;
text-decoration: none;
text-align: center;
transform: translateX(0) translateY(100px) translateZ(0);
transition-duration: 0.3s;
transition-property: transform;
}
.imageWrapper:hover .cornerLink {
transform: translateX(0) translateY(0) translateZ(0);
}
a {
color: #ffffff;
text-decoration: none;
text-align: center;
}
<body>
<main>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
</main>
</body>
Related
I am trying to implement a fixed header on a relatively simple site I am working on. It works on every page except one with an image gallery I have co-opted where the fixed header appears behind the photos in the gallery. I have tried setting the z-index property but it is either not working or I don't quite understand how it works. Any help would be much appreciated.
CSS:
#charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
.clr{
clear: both;
}
.parallax {
background-image: url("../images/bg.jpg");
height: 1080px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
a{
text-decoration: none;
color:#000000;
}
a:hover{
color:#FF0004;
}
a:active{
color:#000000;
}
a:visited{
color:#000000;
}
.main-header{
background-color: #ffffff;
line-height: 1;
}
.main-header h1{
color: #F800FF;
font-size: 9vw;
padding: 0;
}
.navbar{
background-color:#BCBCBC;
color:#FFFFFF;
width:100%;
line-height: normal;
padding: 1vw;
}
.navbar ul{
padding: 0px;
list-style: none;
}
.navbar li{
display:inline;
}
.navbar a{
color: #FFFFFF;
text-decoration: none;
vertical-align: middle;
font-size: calc(10px + .6vw);
padding: 1.5vw;
}
.navbar a:hover{
*/border-top: #F800FF solid thick;*/
}
.footer-bar{
background-color:#BCBCBC;
color:#FFFFFF;
line-height: normal;
padding-top: 1vw;
padding-bottom: 1vw;
margin-top: 2vw;
}
.footer-bar ul{
padding: 0px;
list-style: none;
}
.footer-bar li{
display:inline;
margin-left: .5vw;
margin-right: .5vw;
}
body{
margin: 0;
/*background-image: url("");
background-size:cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;*/
background-color: #ffffff;
color: #000000;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 18px;
font-weight: normal;
line-height: 1.6em;
}
h1{
color:#000000;
font-size: 3vw;
padding-bottom: .5em;
padding-top: 1.5em;
}
h2{
font-size: 2vw;
color:#000000;
padding-bottom: .5em;
padding-top: .5em;
}
h3{
font-size: 2vw;
color:#000000;
padding-bottom: .5em;
padding-top: .5em;
}
.container{
}
.container{
width: 80%;
margin: auto;
text-align: center;
}
.container-h{
width: 95%;
margin: auto;
text-align: center;
}
.container-f{
width: 95%;
margin: auto;
text-align: center;
}
.box-1{
background-color: #ffffff;
color: #000000;
/*opacity: 0.9;*/
/*filter: alpha(opacity=90);*/
padding: 10px;
margin: 20px 0;
}
.categories{
background-color:#00FFE8;
color:#000000;
/*opacity: 0.9;*/
/*filter: alpha(opacity=90);*/
border: 10px solid #000000;
padding: 10px;
}
.categories ul{
padding: 0;
list-style: none;
}
.categories li{
padding-bottom: 4px;
border-bottom: 2px #000000 dashed;
}
/*FOR CSS IMAGE GALLERY*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.heading {
text-align: center;
font-size: 2.0em;
letter-spacing: 1px;
padding: 40px;
color: white;
}
.gallery-image {
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery-image img {
height: 250px;
width: 350px;
transform: scale(1.0);
transition: transform 0.4s ease;
}
.gallery-image-c img {
height: 350px;
width: 350px;
transform: scale(1.0);
transition: transform 0.4s ease;
}
.img-box {
box-sizing: content-box;
margin: 10px;
height: 250px;
width: 350px;
overflow: hidden;
display: inline-block;
color: white;
position: relative;
background-color: white;
}
.img-box-c {
box-sizing: content-box;
margin: 10px;
height: 350px;
width: 350px;
overflow: hidden;
display: inline-block;
color: white;
position: relative;
background-color: white;
}
.caption {
position: absolute;
bottom: 5px;
left: 20px;
opacity: 0.0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.transparent-box {
height: 250px;
width: 350px;
background-color:rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
transition: background-color 0.3s ease;
}
.transparent-box-c {
height: 350px;
width: 350px;
background-color:rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
transition: background-color 0.3s ease;
}
.img-box:hover img {
transform: scale(1.1);
}
.img-box-c:hover img {
transform: scale(1.1);
}
.img-box:hover .transparent-box {
background-color:rgba(0, 0, 0, 0.5);
}
.img-box-c:hover .transparent-box-c {
background-color:rgba(0, 0, 0, 0.5);
}
.img-box:hover .caption {
transform: translateY(-20px);
opacity: 1.0;
}
.img-box-c:hover .caption {
transform: translateY(-20px);
opacity: 1.0;
}
.img-box:hover {
cursor: pointer;
}
.img-box-c:hover {
cursor: pointer;
}
.caption > p:nth-child(2) {
font-size: 0.8em;
}
.opacity-low {
opacity: 0.5;
}
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main-header">
<div class="container-h">
<h1>HEADING</h1>
</div>
</header>
<nav class="navbar" id="myNavbar">
<div class="container">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
</nav>
<div class="box-1">
<div class="container">
<div class="gallery-image">
<a href="images/bandpics/promo1.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/promo1.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p></p>
<p class="opacity-low"></p>
</div>
</div>
</div></a>
<a href="images/bandpics/poster.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/poster.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/promo2.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/promo2.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/promo3.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/promo3.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/band1.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/band1.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/band2.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/band2.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/band1.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/band1.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/band3.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/band3.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/falling.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/falling.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/terrorpromo.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/terrorpromo.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/mirror.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/mirror.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/promo4.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/promo4.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
</div>
</div>
</div>
<div class="clr"></div>
<footer class="footer-bar">
<div class="container-f">
<ul>
<li><img src="images/socialmedia/instagram.png" alt="Instagram" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/facebook.png" alt="Facebook" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/twitter.png" alt="Twitter" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/spotify.png" alt="Spotify" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/apple.png" alt="Apple Music" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/youtube.png" alt="YouTube" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/soundcloud.png" alt="Soundcloud" style="width: calc(20px + 2vw)"</li>
</ul>
</div>
</footer>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("myNavbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>
Unless I misunderstood your question, but if you add z-index: 1: to navbar class it seems to fix your problem.
.navbar {
z-index: 1;
}
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 am making a website and I have a small bug where the images in one section appears in front of my menu. I tried to play around the z-index value but nothing worked for me. Here is what it looks like
I would like the images to be under the menu as-per, but it does not seem to function properly and I cannot detect the problem, can someone help me out with this?
HTML:
<section id="portfolio">
<div class="container">
<h1>MY WORK</h1>
<h2>Below you will find my favorite projects & school assignments</h2>
<!--CPU-->
<div class="project">
<div class="img-box">
<img src="./img/cpu.png">
<div class="hovertext">Test Text 1</div>
</div>
</div>
<!--JAVA-->
<div class="project">
<div class="img-box">
<img src="./img/JSON.png">
<div class="hovertext">Test Text 2</div>
</div>
</div>
<!--PHOTOSHOP-->
<div class="project">
<div class="img-box">
<img src="./img/photoshop.png">
<div class="hovertext">Test Text 3</div>
</div>
</div>
CSS:
#portfolio {
background-color: : white;
padding-bottom: 100px;
}
#portfolio h1 {
font-size: 30px;
font-weight: 400px;
letter-spacing: 5px;
text-align: center;
color: #000;
}
#portfolio h2 {
font-size: 15px;
letter-spacing: 2px;
text-align: center;
color: #000;
}
.project {
display: inline-block;
width: 33.33%;
margin-right: -4px;
}
.img-box {
padding: 20px;
position: relative;
}
.project img {
width: 100%;
display: block;
border-radius: 12px;
}
.img-box img:hover {
transform: scale(1.1);
transition: 0.5s;
opacity: 0.5;
}
.img-box .hovertext {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-box:hover .hovertext {
display: block;
}
I did not test but maybe will work.
<div class="container" style="z-index: -999999">
I have created a grid of images with a hover effect. When you hover over the images it zooms in. It is working fine on safari but when I try it out on google chrome the images disappear when you hover over them instead of the zoom effect. I have provided my code below.
HTML :
<body>
<div class="message0">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_134800463.jpg?11249922432265530300" />
Wakeup And Makeup <img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_134800463.jpg?11249922432265530300" />
</div>
<div class="masonry">
<div class="fader0">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_113634307.jpg?3027373344113436523" />
</div>
</div>
<div class="my-wrapper">
<div class="item">
<a href="https://vipera-nyc.myshopify.com/collections/eyeshadow"><img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Vipera_cae46bcd-7bd4-4ed6-ab7d-5970f5d6fa44.jpg?5440451544572147338" /></a>
</div>
</div>
<div class="fader1">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_313764047.jpg?453596164489734443" />
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/HelloG-5.jpg?7272790211589801407" />
</div>
<div class="fader">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/EYEScool.jpg?3027373344113436523" />
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_91130072.jpg?3027373344113436523" />
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Makeup-2.jpg?7468684895134417704" />
</div>
<div class="my-wrapper">
<div class="item">
<a href="https://twitter.com/ViperaNYC"><img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Tweet_us_your_look.jpg?453596164489734443" /></a>
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/glosssssss_5c5c5520-ea20-4c78-8830-e633e5bb1083.jpg?1992342090983963689" />
</div>
<div class="item">
<div class="my-wrapper">
<a
href="https://vipera-nyc.myshopify.com/collections/best-selling-products">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Best_Selling_Products-3.jpg?887070778965157300" />
</a>
</div>
</div>
</div>
</body>
CSS:
.item img { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.itemkat img {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width:100%;
}
.grid {
column-count: 3;
-webkit-column-gap: -10px; /* Chrome, Safari, Opera */
-moz-column-gap: -10px; /* Firefox */
column-gap: -10px;
line-height:100%;
}
.grid-item{
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.message0
{
display:center;
font-size:30px;
}
.my-wrapper {
background-color: #f2f2f2;
}
.my-wrapper:hover img {
opacity:0.2;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
/* margin: 0%; /*makes left margin closer */
overflow: hidden;
width: 470px;
}
.item img {
max-width: 100%; /*reduces space between images */
overflow: hidden;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
overflow: hidden;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.message0 {
font-family: Brush Script MT ;
font-size:120px;
text-align:center;
color:black;
letter-spacing: 5px;
}
I have provided a fiddle. ***IT WORKS ON OTHER INTERNET BROWSERS BUT NOT GOOGLE CHROME WHICH IS THE PROBLEM****
https://jsfiddle.net/getMecoffee56/o11hmwek/1/
hi I'm assigned to do a basic profile page for class, but for one of the html pages I am unable to put the text in front of each individual image, i removed my attempts at it to help ease confusion.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr></hr>
<img src="assets/images/gym.jpg" alt="gym">Gym
<img src="assets/images/hiking.jpg" alt="hiking">Hiking
<img src="assets/images/overwatch.jpg" alt="overwatch">Overwatch
<img src="assets/images/running.jpg" alt="running">Running
<img src="assets/images/programming.jpg" alt="programming">Programming
</div>
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
You'll need to absolute position your text in front of the image with css. It helps to wrap each image and text item into a block to apply the css.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="assets/images/gym.jpg" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="assets/images/hiking.jpg" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="assets/images/overwatch.jpg" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="assets/images/running.jpg" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="assets/images/programming.jpg" alt="programming">
<span>Programming</span>
</div>
</div>
css:
.item {
position: relative;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Edit: Added a simplified fiddle example
* {
box-sizing: border-box;
}
.aboutmeprofile {
float: left;
background-color: white;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.item {
position: relative;
width: 100%;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
text-align: center;
width: 100%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="programming">
<span>Programming</span>
</div>
</div>
The best way to do this is to create a div for the label and use the image as the background-image for the div.
background-image: image.png
jsfiddle
this is what I came up with. Just add the other images and its respective label:
#h2, #h3 {
color: #4aaaa5;
text-align: left;
font-size: 30px;
font-weight: bold;
font-family: 'Georgia', Times, Times New Roman, serif;}
#linebreak {
clear: both;
border: 1px solid gray;
width: 100%;
margin: 0;
padding: 0;}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.container {
height: 100%;
width: 100%;
position: relative;
}
.image {
width:100%;
height:100%;
}
.text {
position: absolute;
color: white;
left: 50%;
top: 50%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Gym
</span>
</div>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Hiking
</span>
</div>
</div>
Hope it helps!
You can simply do this with position:absolute property , first you need to create a relative div , then call the image and h2 inside the div , then set absolute position to h2
Check with the snippet
.content_div {
position:relative;
}
.content_div h2 {
position:absolute;
bottom:25px;
color:#fff;
font-size:18px;
}
.content_div h2 span {
background:rgba(0,0,0,0.8);
padding:10px;
display:block;
border-bottom:2px solid #000;
}
.content_div h2 span:last-child{
border-bottom:none;
}
<div class="content_div">
<img src="http://www.picgifs.com/graphics/c/cute/graphics-cute-160852.jpg" alt="image" />
<h2>
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</h2>
</div><!-- /.content_div -->