I've been trying to position the text (h2) that appears on hover horizontally centered near the bottom in their respective images.
I've been told to use auto margins but they don't seem to change anything at all. Aligning it with % or px won't work out well at all on mobile devices, unless I'm missing something important. (experience, or lack thereof, says that I am!).
I also can't seem to get the grayscale filter to stay applied when hovering the text but I'm not fussed by that yet.
Thanks!
Here's my code:
/*CSS Document*/
/*MAIN CSS SETTINGS*/
body {
padding: 0px;
background-color: none;
}
p, h1, h2, h3, h4, h5, ul {}
h1 {font-family: serif, arial;}
/*LINK STYLING*/
/* unvisited link */
a:link {
color: transparent;
text-decoration: none;
transition: color 1s ease;
-webkit-transition: color 1s ease;
}
/* visited link */
a:visited {
color: transparent;
text-decoration: none;
transition: color 1s ease;
-webkit-transition: color 1s ease;
}
/* mouse over link */
a:hover, ::-moz-selection {
color: white;
text-decoration: none; /* Safari */
transition: color 1s;
}
a:hover, ::selection {
color: white;
text-decoration: none; /* Safari */
transition: color 1s;
}
/* selected link */
a:active {
color: transparent;
text-decoration: none;
transition: color 1s ease;
-webkit-transition: color 1s ease;
}
/*END LINK STYLING/*
/*END MAIN SETTINGS CSS*/
/*SCROLLBAR*/
::-webkit-scrollbar-track {
visibility: hidden;
}
::-webkit-scrollbar {
width: 4px;
visibility: hidden;
}
::-webkit-scrollbar-thumb {
background-color: white;
}
/*TITLE AREA*/
.header {
padding: 0;
margin: 0;
}
.header h1 {
text-align: center;
letter-spacing: 12px;
font-size: 5em;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
/*CONTENT AREA*/
.flexbox {
display: flex;
justify-content: center;
align-items: center;
margin-top: 15vh;
/*border-top: 32px dotted black;
border-bottom: 32px black; */
padding: 10px;
}
.pictures {
overflow: hidden;
height: 50vh;
width: 30vw;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
margin-right: 10px;
}
.pictures img {
object-fit: cover;
height: 50vh;
width: 30vw; /*ALWAYS SAME AS .pictures width: x;*/
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
.pictures img:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
@media screen and (max-width: 1025px) {
.header h1 {font-size: 10vw;}
.flexbox {
flex-direction: column;
margin-top: 7vh;
/*border-top: 20px dotted black;
border-bottom: 20px dotted black; */
}
.pictures {
height: 25vh;
width: 100vw;
}
.pictures img {
height: 25vh; /*ALWAYS SAME AS .pictures width: x;*/
width: 100vw;
}
}
.pictures h2 {
position: absolute;
z-index: 50;
margin-top: 22%;
font-family: helvetica;
font-size: 3em;
text-transform: uppercase;
}
}
/*MENU ARE*/
/*FOOTER AREA*/<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="style.css">
<title>TEST</title>
</head>
<body>
<div class="header">
<h1>HELLO!</h1>
</div>
<div class="flexbox">
<div class="pictures picture1">
<a href="#A">
<h2>this is h2</h2>
<img src="http://i.imgur.com/MSDFGok.jpg">
</a>
</div>
<div class="pictures picture2">
<a href="#B">
<h2>same here</h2>
<img src="http://i.imgur.com/sl3NvTE.jpg">
</a>
</div>
<div class="pictures picture3">
<a href="#C">
<h2>Yep, this too.</h2>
<img src="http://i.imgur.com/81VsbWp.jpg">
</a>
</div>
</div>
</body>
</html>