Can't move background image up on website - html

I'm trying to add a background image to my timeline on a website, but I can't seem to move my background image up and down without it shrinking. It almost seems like there's some invisible bar keeping me from moving the image up. If it moves up, it just shrinks.
edit: Sorry for the confusion. I am wanting to move the image up in the background of the timeline. I can't move it up using top.
Initially I couldn't even get the image to show up, but now I need to use the
background-image: cover
property and it's not working as expected. I'm doing something wrong.
What I've tried:
adjusting the height and width of my elements
using Top to move the background image up/down
Here's the code for the timeline and it's styling sheets:
html {
font-size: 10px;
font-family: Raleway;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
font-weight: normal;
}
h1 {
font-family: Raleway;
padding: 20px;
font-size: 53px;
text-shadow: 2px 2px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%;
}
h2 {
text-align: center;
font-size: 25px;
}
h2 p {
font-size: 18px;
}
.right-button {
float: right;
padding-right: 47px
}
.other-button {
float: right;
padding-right: 30px;
}
#timeline {
font-family: tahoma;
font-size: 15px;
line-height: 1.75;
padding: 0;
margin-left: 400px;
height: 400px;
width: 650px;
display: flex;
background-color: #031625;
}
.t1-item:before,
.t1-item:after {
transform: translate3d(0, 0, 0);
content: ' ';
position: absolute;
left: 0;
top: 0;
}
.t1-item {
padding: 25px;
transform: translate3d(0, 0, 0);
position: relative;
width: 25%;
margin-top: 20rem;
color: white;
overflow: hidden;
transition: width 0.5s ease;
}
.t1-item:after {
background: rgba(3, 22, 37, 0.85);
opacity: 1;
transition: opacity .5s ease;
}
.t1-item:before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%);
z-index: 1;
opacity: 0;
transform: translate3d(0, 0, 0) translateY(50%);
transition: opacity .5s ease, transform .5s ease;
}
.t1-item:hover {
width: 30%;
}
.t1-item:hover:after {
opacity: 0;
}
.t1-item:hover:before {
opacity: 1;
transform: translate3d(0, 0, 0) translateY(0);
transition: opacity 1s ease, transform 1s ease .25s;
}
.t1-item:hover .t1-content {
opacity: 1;
transform: translateY(0);
transition: all .75s ease .5s;
}
.t1-item:hover .t1-bg {
filter: grayscale(0);
}
.t1-content {
transform: translate3d(0, 0, 0) translateY(25px);
position: relative;
z-index: 1;
text-align: center;
margin: 0.1618em;
top: 55%;
opacity: 0%;
}
.t1-content h3 {
font-family: tahoma;
text-transform: uppercase;
color: #1779cf;
font-size: 1.44rem;
font-weight: normal;
}
.t1-year {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.t1-year p {
font-family: tahoma;
font-size: 1.628rem;
line-height: 0;
}
.t1-bg {
transform: translate3d(0, 0, 0);
position: absolute;
left: 0;
top: 0px;
background-size: cover;
background-position: center center;
transition: filter .5se ease;
filter: grayscale(100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li>Projects</li>
<li class="right-button">Contact Info</li>
<li class="other-button">Test</li>
<li class="other-button">Testing</li>
</ul>
<h2> Welcome to my website!
<p> I hope you learn a little about me while you're here. </p>
</h2>
<section id="timeline">
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg); height: 100%; width: 100%;">
</div>
<div class="t1-year">
<p class="f2 heading">2014</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg) height: 100%, width: 100%"></div>
<div class="t1-year">
<p class="f2 heading">2015</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2016</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
</section>
</body>
</html>

Related

Why the images in the background are glow up when I click?

When I click my <a> tag for the popup box, the images in the background (with overlay effects) are glowing up, and I don't know why. If anybody know something I write the code under here.
As you can see I've put href to #popup1 in the first <a> tag, and it opens the popup box, but in the background you can see the image like glowing, the border too.
I've changed the display tag and other CSS tags, but nothing.
Here is the Codepen.

the problem is actually you add pop-up before container 2 so that's why it is glowing.
So, if you dont want to make this glow just add your pop-up division after both
containers like this.
Dont change your Css. you just have to change position of divisions like this
<div class="container1" style="cursor:default;">
<div class="container2">
<div class="content">
<a id="ant" href="#popup1" onclick="show('popup2')">
<div class="content-overlay"></div>
<img class="content-image" src="https://i.postimg.cc/5tNkjkV5/2.png" style="z-index: 0;height: 200px;width: 330px;border:2px solid rgb(205,144,76);padding:0;">
<div class="content-details fadeIn-bottom" style="background-size:cover;">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif;">ANTIPASTI</h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
<div class="container2">
<div class="content">
<a id="prim">
<div class="content-overlay"></div>
<img class="content-image" src="https://i.postimg.cc/5tNkjkV5/2.png" style="border:2px solid rgb(205,144,76);padding:0; height:200px; width:330px;">
<div class="content-details fadeIn-bottom">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif;"> PRIMI PIATTI </h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
</div>
<div id="popup1" class="popup">
×
<h2>The Popup Has Arrived</h2>
<p>QUESTI SONO GLI ANTIPASTI</p>
</div>
<a href="#ant" class="close-popup"></a

It depends on the order of your HTML-Elements. This example will fix the problem
.container1 {
display: flex;
width: 100%;
flex-wrap: wrap;
margin-top: 110px;
align-content: space-around;
justify-content: center;
transition: all 0.2s linear;
}
.container1 > div {
padding: 40px;
justify-content: center;
}
*,
*:before,
*:after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.main-title {
color: #2d2d2d;
text-align: center;
text-transform: capitalize;
padding: 0.7em 0;
}
.container {
padding: 1em 0;
float: left;
width: 50%;
}
#media screen and (max-width: 640px) {
.container {
display: block;
width: 100%;
}
}
#media screen and (min-width: 900px) {
.container {
width: 33.33333%;
}
}
.container .title {
color: #1a1a1a;
font-family: 'Roboto', sans-serif;
text-align: center;
margin-bottom: 10px;
}
.content {
position: relative;
width: 100%;
max-width: 400px;
height: 100%;
margin: auto;
overflow: hidden;
transition: transform 0.4s;
}
.content .content-overlay {
/* background: rgba(70,34,0);*/
background: rgba(214, 142, 60, 70%);
/* background: rgb(214,142,60);*/
position: absolute;
height: 97%;
width: 100%;
left: 30px;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.content:hover .content-overlay {
opacity: 0.5;
}
.content-details {
position: absolute;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.content:hover .content-details {
top: 50%;
left: 50%;
right: 50%;
opacity: 1;
}
.content-details h3 {
color: #fff;
font-weight: 500;
text-align: center;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
padding-left: 20px;
text-transform: uppercase;
}
.content-details p {
color: #fff;
font-size: 0.8em;
text-align: center;
padding-left: 20px;
}
.fadeIn-bottom {
top: 80%;
}
.fadeIn-top {
top: 20%;
}
.fadeIn-left {
left: 20%;
}
.fadeIn-right {
left: 80%;
}
h1 {
font-size: 3em;
text-align: center;
color: #00898e;
margin: 0;
padding: 30vh 0 1em;
}
h2 {
text-align: center;
white-space: nowrap;
color: #00898e;
}
a {
text-decoration: none;
color: #fff;
}
p {
text-align: left;
}
.btn {
display: inline-block;
padding: 10px 20px;
border: 2px solid #00898e;
border-radius: 10px;
transition: background 0.3s;
}
.btn:hover {
background: #00898e;
}
.popup {
position: fixed;
padding: 10px;
max-width: 500px;
border-radius: 10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.9);
visibility: hidden;
opacity: 0;
/* "delay" the visibility transition */
-webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
transition: opacity 0.5s, visibility 0s linear 0.5s;
z-index: 1;
}
.popup:target {
visibility: visible;
opacity: 1;
/* cancel visibility transition delay */
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.popup-close {
position: absolute;
padding: 10px;
max-width: 500px;
border-radius: 10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.9);
}
.popup .close {
position: absolute;
right: 5px;
top: 5px;
padding: 5px;
color: #000;
transition: color 0.3s;
font-size: 2em;
line-height: 0.6em;
font-weight: bold;
}
.popup .close:hover {
color: #00e5ee;
}
.close-popup {
background: rgba(0, 0, 0, 0.7);
cursor: default;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
visibility: hidden;
/* "delay" the visibility transition */
-webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
transition: opacity 0.5s, visibility 0s linear 0.5s;
}
.popup:target + .close-popup {
opacity: 1;
visibility: visible;
/* cancel visibility transition delay */
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
<div class="container1" style="cursor: default">
<div class="container2">
<div class="content">
<a id="ant" href="#popup1" onclick="show('popup2')">
<div class="content-overlay"></div>
<img
class="content-image"
src="https://i.postimg.cc/5tNkjkV5/2.png"
style="z-index: 0; height: 200px; width: 330px; border: 2px solid rgb(205, 144, 76); padding: 0"
/>
<div class="content-details fadeIn-bottom" style="background-size: cover">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif">ANTIPASTI</h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
<div class="container2">
<div class="content">
<a id="prim">
<div class="content-overlay"></div>
<img
class="content-image"
src="https://i.postimg.cc/5tNkjkV5/2.png"
style="border: 2px solid rgb(205, 144, 76); padding: 0; height: 200px; width: 330px"
/>
<div class="content-details fadeIn-bottom">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif">PRIMI PIATTI</h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
<!-- The popup should be entered as the last element so that it overlays the other elements -->
<div id="popup1" class="popup">
×
<h2>The Popup Has Arrived</h2>
<p>QUESTI SONO GLI ANTIPASTI</p>
</div>
</div>

Can't get background image to show up on website

I'm trying to put a timeline on my website but can't seem to get my background image to show up.
What I've tried:
checking the path of my image
matching the height of my divs/HTML elements to make sure the image is covering the right height
made sure I put background-image in my HTML tags
tried using a negative value for top to move the image around - didn't work
I also tried deleting my other styling elements and adding them back in to see if they were causing it. I'm not quite sure where I'm going wrong.
The CSS element I'm wrestling with is called t1-bg (located at bottom of CSS sheet) - here is my code:
(run the snippet in a full window for a proper overview)
html {
font-size: 10px;
font-family: Raleway;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
font-weight: normal;
}
h1 {
font-family: Raleway;
padding: 20px;
font-size: 53px;
text-shadow: 2px 2px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%;
}
h2 {
text-align: center;
font-size: 25px;
}
h2 p {
font-size: 18px;
}
.right-button {
float: right;
padding-right: 47px
}
.other-button {
float: right;
padding-right: 30px;
}
#timeline {
font-family: tahoma;
font-size: 15px;
line-height: 1.75;
padding: 0;
margin-left: 400px;
height: 400px;
width: 650px;
display: flex;
background-color: #031625;
}
.t1-item:before,
.t1-item:after {
transform: translate3d(0, 0, 0);
content: ' ';
position: absolute;
left: 0;
top: 0;
}
.t1-item {
padding: 25px;
transform: translate3d(0, 0, 0);
position: relative;
width: 25%;
margin-top: 20rem;
color: white;
overflow: hidden;
transition: width 0.5s ease;
}
.t1-item:after {
background: rgba(3, 22, 37, 0.85);
opacity: 1;
transition: opacity .5s ease;
}
.t1-item:before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%);
z-index: 1;
opacity: 0;
transform: translate3d(0, 0, 0) translateY(50%);
transition: opacity .5s ease, transform .5s ease;
}
.t1-item:hover {
width: 30%;
}
.t1-item:hover:after {
opacity: 0;
}
.t1-item:hover:before {
opacity: 1;
transform: translate3d(0, 0, 0) translateY(0);
transition: opacity 1s ease, transform 1s ease .25s;
}
.t1-item:hover .t1-content {
opacity: 1;
transform: translateY(0);
transition: all .75s ease .5s;
}
.t1-item:hover .t1-bg {
filter: grayscale(0);
}
.t1-content {
transform: translate3d(0, 0, 0) translateY(25px);
position: relative;
z-index: 1;
text-align: center;
margin: 0.1618em;
top: 55%;
opacity: 0%;
}
.t1-content h3 {
font-family: tahoma;
text-transform: uppercase;
color: #1779cf;
font-size: 1.44rem;
font-weight: normal;
}
.t1-year {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.t1-year p {
font-family: tahoma;
font-size: 1.628rem;
line-height: 0;
}
.t1-bg {
transform: translate3d(0, 0, 0);
position: absolute;
left: 0;
background-size: cover;
background-position: center center;
transition: filter .5se ease;
filter: grayscale(100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li>Projects</li>
<li class="right-button">Contact Info</li>
<li class="other-button">Test</li>
<li class="other-button">Testing</li>
</ul>
<h2> Welcome to my website!
<p> I hope you learn a little about me while you're here. </p>
</h2>
<section id="timeline">
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg)">
</div>
<div class="t1-year">
<p class="f2 heading">2014</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg)"></div>
<div class="t1-year">
<p class="f2 heading">2015</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2016</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
</section>
</body>
</html>

As someone mentioned in a comment on your question, you have no height set on your div. It does in fact have no content. A css background image does not count as content in the html. You can easily prove this by creating a simple html file with just your div in it. If you do the following, there will be no image:
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg)"></div>
Add height and width and the image will appear:
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg); height: 100%; width: 100%"></div>

Difficulty resolving white space below my webpage

I am a noob at HTML/CSS, and I'm trying to put a timeline on my website. I've run into a strange issue: I have a weird block of space under my #timeline class anytime I try to change the height.
What I've tried: I've read some posts about absolute/relative positioning and how if you try to change the height with An absolute or relatively positioned object, it will leave a gap of space between where it is and where it used to be.
With this information, I'm not sure how to reposition my timeline elements without using absolute positioning, because I don't want the timeline to be too large. Any recommendations or tips would be great. here's my code (please view in full window - timeline has some compatibility issues with safari right now:( use chrome if you can)
My CSS is kind of long, but I wanted you to see the whole webpage and understand how It all worked together. I experienced the issue after styling the body and #timeline component, so I believe the styling below these components is causing the issues.
Any pointers would be appreciated.
html{
font-size: 10px;
font-family: Raleway;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
font-weight: normal;
}
h1{
font-family: Raleway;
padding: 20px;
font-size: 53px;
text-shadow: 2px 2px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li{
float: left;
padding-right: 30px;
}
li a{
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
}
li a:hover{
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul{
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%;
}
h2{
text-align: center;
font-size: 25px;
}
h2 p{
font-size: 18px;
}
.right-button{
float: right;
padding-right: 47px
}
.other-button{
float: right;
padding-right: 30px;
}
body{
font-family: tahoma;
font-size: 15px;
line-height: 1.75;
padding: 0;
margin: 0;
}
#timeline{
margin-left: 470px;
height: 400px;
width: 500px;
display:flex;
background-color: #031625;
}
#timeline:hover .t1-item{
max-width: 400px;
max-height: 500px;
width:23.3333%;
}
.t1-item:before, .t1-item:after{
transform: translate3d(0,0,0);
content: ' ';
position: absolute;
left: 0;
top: 0;
}
.t1-item{
transform: translate3d(0,0,0);
position: relative;
width: 25%;
height: 100vh;
min-height: 600px;
color:white;
overflow: hidden;
transition: width 0.5s ease;
}
.t1-item:after{
background: rgba(3,22,37,0.85);
opacity: 1;
transition: opacity .5s ease;
}
.t1-item:before{
background: linear-gradient(to bottom,
rgba(0,0,0,0) 0%, rgba(0,0,0,1) 75%);
z-index: 1;
opacity: 0;
transform: translate3d(0,0,0) translateY(50%);
transition: opacity .5s ease,
transform .5s ease;
}
.t1-item:hover{
width: 30%;
}
.t1-item:hover:after{
opacity: 0;
}
.t1-item:hover:before{
opacity: 1;
transform: translate3d(0,0,0) translateY(0);
transition: opacity 1s ease, transform 1s ease
.25s;
}
.t1-item:hover .t1-content{
opacity: 1;
transform: translateY(0);
transition: all .75s ease .5s;
}
.t1-item:hover .t1-bg{
filter: grayscale(0);
}
.t1-content{
transform: translate3d(0,0,0) translateY(25px);
position: relative;
z-index: 1;
text-align: center;
margin: 0.1618em;
top: 55%;
opacity: 0%;
}
.t1-content h3{
font-family: tahoma;
text-transform: uppercase;
color: #1779cf;
font-size: 1.44rem;
font-weight: normal;
}
.t1-year{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.t1-year p{
font-family: tahoma;
font-size: 1.628rem;
line-height: 0;
}
.t1-bg{
transform: translate3d(0,0,0);
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: center center;
transition: filter .5se ease;
filter: grayscale(100%);
}
<!DOCTYPE html>
<html lang = "en" >
<head>
<meta charset = "UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Header </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li><a href="#projects" >Projects</a></li>
<li class="right-button">Contact Info</li>
<li class="other-button">Test</li>
<li class="other-button">Testing</li>
</ul>
<h2> Welcome to my website!
<p> I hope you learn a little about me while you're here. </p>
</h2>
<section id="timeline">
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://eng-dev.stanford.edu/sites/default/files/styles/full_width_banner_tall/public/chalkboard_web.jpg?itok=xqk3ef56)">
</div>
<div class="t1-year">
<p class="f2 heading">2014</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2015</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2016</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2015</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
</section>
</body>
</html>

If i'm understanding your problem correctly, it's the .t1-item {height: 100vh;} that's giving you the issue, along with the min-height: 600px. That is pushing the .t1-item down in its pre-hover state, thus creating that space.
An alternative to using these height specifications would be to use margin-top to position your instances of .t1-item:
.t1-item {
transform: translate3d(0,0,0);
position: relative;
width: 25%;
color: white;
overflow: hidden;
transition: width 0.5s ease;
margin-top: 20rem;
}

Only some images are not displaying in Firefox

I am having an odd issue with certain images not displaying in Firefox, but displaying in every other browser.
You can see the differences between Chrome and Firefox here
I am using an unordered list to display a row of images that are list items. However, at the beginning of each row, I am placing a normal image in the list that is not tagged as a list item. This works perfectly in Chrome, Edge, IE and Safari but, for some reason, only a few of those images won't display in Firefox. What is confusing is that there is nothing fundamentally different about rows one and two when compared to rows three and four - that I see anyway.
It is also squishing the images in row three and four and I'm not having that issue in other browsers.
The only differences I can see are image URLs. I tried removing the disable divider to see if that made a difference and it did not.
I have created a JS Fiddle to replicate the issue.
What is included below is a greatly reduced version of what you will find using the link.
hr {
opacity: .5;
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 80px;
margin-right: 100px;
border-style: inset;
background: #00adbd;
border-top: 0.5px dotted #fff;
}
.disabledbutton {
pointer-events: none;
opacity: 0.4;
}
#outeroutside {
background-image: url("/assets/tile.jpg");
background-color: #a00f14;
width: 1300px;
max-width: 100%;
padding: 10px 10px 10px 10px;
position: relative;
}
#outside {
text-align: center;
background-color: rgba(252, 251, 245, 0.95);
width: 1200px;
max-width: 100%;
padding: 0px 10px 0px 0px;
}
#welcomemain p {
width: 95%;
display: inline-block;
text-align: center;
margin: 15px 5px;
height: auto;
}
#welcomemain img {
padding: 10px;
max-width: 100%;
}
h2 {
color: #2e1f11;
}
#outeroutside a:link {
color: #996515;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
#outeroutside a:hover {
color: #FFD700;
opacity: 0.9;
}
#outeroutside a:visited {
text-decoration: underline;
color: #996515;
}
#outeroutside a:active {
opacity: 0.5;
}
.row2 a {
color: #C0C0C0 !important;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
.row2 a:visited {
text-decoration: underline;
color: #999999;
}
.row2 a:active {
opacity: 0.5;
}
#navigation img {
padding: 10px;
max-width: 30%;
}
.youtube {
position: relative;
padding-bottom: 60%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.youtube iframe {
padding: 10px 10px 10px 30px;
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
b {
color: #312112;
}
i {
color: #b05830;
}
.font {
font-size: 15px;
}
.ih-item.circle.effect1 .spinner {
width: 270px;
height: 270px;
border: 10px groove #fdec6d;
border-right-color: #739968;
border-bottom-color: #739968;
border-radius: 50%;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .img {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: auto;
height: auto;
}
.ih-item.circle.effect1 .img:before {
display: none;
}
.ih-item.circle.effect1.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6);
}
.ih-item.circle.effect1 .info {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: #333333;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect1 .info p {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect1 a:hover .spinner {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.ih-item.circle.effect1 a:hover .info {
opacity: 1;
}
.ih-item {
position: relative;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ih-item a {
color: #333;
}
.ih-item a:hover {
text-decoration: none;
}
.ih-item img {
width: 100%;
height: 100%;
}
.ih-item.circle {
position: relative;
width: 270px;
height: 270px;
border-radius: 50%;
}
.ih-item.circle .img {
position: relative;
width: 260px;
height: 260px;
border-radius: 50%;
}
.ih-item.circle .img:before {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle .img img {
border-radius: 50%;
}
.ih-item.circle .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
border-radius: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ih-item.circle.effect1 .spinner {
width: 270px;
height: 270px;
border: 10px solid #ecab18;
border-right-color: #1ad280;
border-bottom-color: #1ad280;
border-radius: 50%;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .img {
position: absolute;
top: 0px;
bottom: 0;
left: 0px;
right: 0;
width: auto;
height: auto;
}
.ih-item.circle.effect1 .img:before {
display: none;
}
.ih-item.circle.effect1.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6)
}
.ih-item.circle.effect1 .info {
top: 0px;
bottom: 0;
left: 0px;
right: 0;
background: #333;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 20px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect1 .info p {
color: #bbb;
padding: 11px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect1 a:hover .spinner {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.ih-item.circle.effect1 a:hover .info {
opacity: 1;
}
.row {
margin: 5px 0px 10px 5px;
padding: 10px 3px 30px 3px;
width: 1115px;
max-width: 100%;
display: flex;
flex-wrap: nonwrap;
align-content: center;
overflow-y: hidden;
overflow-x: auto;
background-color: rgba(238, 155, 195, 0.95);
}
.row2 {
margin: 5px 0px 5px 5px;
padding: 10px 3px 15px 3px;
width: 1115px;
max-width: 100%;
display: flex;
flex-wrap: nonwrap;
align-content: center;
overflow-y: hidden;
overflow-x: auto;
background-color: rgba(238, 46, 54, 0.95);
}
.col-sm-6 li {
padding: 10px 20px 10px 20px;
max-width: 33.3%;
}
a.effect-shine:hover {
-webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%);
-webkit-mask-size: 200%;
animation: shine 2s infinite;
}
#-webkit-keyframes shine {
from {
-webkit-mask-position: 150%;
}
to {
-webkit-mask-position: -50%;
}
<ul id="week1">
<ul class="row">
<img src="http://springfieldleather.com/assets/Scroll_Week1.1.png">
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Gator_Buckles.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>$5 Gator Buckle Sets</h3>
<p>Get a selection of 6-piece gator buckle sets for just $5. These opulent adornments are jewel encrusted and waiting to make your belt fancy!</p>
</div>
</div>
</a>
<P> Click here to see all styles! </p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Liz_CraftPack.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Liz's Craft Pack</h3>
<p>Explore the possibilities of leather craft with Liz's craft pack. Bursting at the seams with leather components, this not-so-little pack is only $25!</p>
</div>
</div>
</a>
<P> Get Liz's Craft Pack Here!</p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Stamping_Tools.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>25% Off Stamping Tools</h3>
<p>Transform your veg tan with stamping tools! For this month only, get select stamping tools at an even lower price! Nearly 100 tools are included!</p>
</div>
</div>
</a>
<P> Click here to view the selection!</p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_BeltBend_Black.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Black Belt Bends</h3>
<p>These Hermann Oak drum dyed belt bends are magnificent and they're on sale! Get them in black or brown. </p>
</div>
</div>
</a>
<P> Get Black Hermann Oak Belt Bend Here!</p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_BeltBend_Brown.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Brown Belt Bends</h3>
<p>These Hermann Oak drum dyed belt bends are magnificent and they're on sale! Get them in black or brown.</p>
</div>
</div>
</a>
<P> Get Brown Hermann Oak Belt Bend Here!</p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_VegTan_Split_Bundle.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Veg Tan Split Bundle</h3>
<p>Our new splitter has left us swimming in veg tan splits! Get this sweet bundle for just $15!</p>
</div>
</div>
</a>
<P> Get Your Veg Tan Split Bundle Here!</p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Jr_LegalPad_Templete.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Legal Pad Poly Template</h3>
<p>We have finally done it! Poly templates for one of our favorite projects: leather covers! Cover your legal pad in luxury with this template for only $5.</p>
</div>
</div>
</a>
<P> Get Your Legal Pad Template Here!</p>
</li>
</ul>
</ul>
<hr>
Please note: This code has a number of problems in IE due to lack of support for some features, however even IE is displaying the leading image in each row. There are small circles in the li's that appear in the JS Fiddle that do not display on my actual website.

You really need to fix your markup. As pointed out in my comment, you have invalid HTML. Regardless, to correct the display issue in FF, here is a possible solution:
Flexbox is shrinking your img. You can configure it not to. I've added flex-shrink: 0 to .row img
hr {
opacity: .5;
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 80px;
margin-right: 100px;
border-style: inset;
background: #00adbd;
border-top: 0.5px dotted #fff;
}
.disabledbutton {
pointer-events: none;
opacity: 0.4;
}
#outeroutside {
background-image: url("/assets/tile.jpg");
background-color: #a00f14;
width: 1300px;
max-width: 100%;
padding: 10px 10px 10px 10px;
position: relative;
}
#outside {
text-align: center;
background-color: rgba(252, 251, 245, 0.95);
width: 1200px;
max-width: 100%;
padding: 0px 10px 0px 0px;
}
#welcomemain p {
width: 95%;
display: inline-block;
text-align: center;
margin: 15px 5px;
height: auto;
}
#welcomemain img {
padding: 10px;
max-width: 100%;
}
h2 {
color: #2e1f11;
}
#outeroutside a:link {
color: #996515;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
#outeroutside a:hover {
color: #FFD700;
opacity: 0.9;
}
#outeroutside a:visited {
text-decoration: underline;
color: #996515;
}
#outeroutside a:active {
opacity: 0.5;
}
.row2 a {
color: #C0C0C0 !important;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
.row2 a:visited {
text-decoration: underline;
color: #999999;
}
.row2 a:active {
opacity: 0.5;
}
#navigation img {
padding: 10px;
max-width: 30%;
}
.youtube {
position: relative;
padding-bottom: 60%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.youtube iframe {
padding: 10px 10px 10px 30px;
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
b {
color: #312112;
}
i {
color: #b05830;
}
.font {
font-size: 15px;
}
.ih-item.circle.effect1 .spinner {
width: 270px;
height: 270px;
border: 10px groove #fdec6d;
border-right-color: #739968;
border-bottom-color: #739968;
border-radius: 50%;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .img {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: auto;
height: auto;
}
.ih-item.circle.effect1 .img:before {
display: none;
}
.ih-item.circle.effect1.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6);
}
.ih-item.circle.effect1 .info {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: #333333;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect1 .info p {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect1 a:hover .spinner {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.ih-item.circle.effect1 a:hover .info {
opacity: 1;
}
.ih-item {
position: relative;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ih-item a {
color: #333;
}
.ih-item a:hover {
text-decoration: none;
}
.ih-item img {
width: 100%;
height: 100%;
}
.ih-item.circle {
position: relative;
width: 270px;
height: 270px;
border-radius: 50%;
}
.ih-item.circle .img {
position: relative;
width: 260px;
height: 260px;
border-radius: 50%;
}
.ih-item.circle .img:before {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle .img img {
border-radius: 50%;
}
.ih-item.circle .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
border-radius: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ih-item.circle.effect1 .spinner {
width: 270px;
height: 270px;
border: 10px solid #ecab18;
border-right-color: #1ad280;
border-bottom-color: #1ad280;
border-radius: 50%;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .img {
position: absolute;
top: 0px;
bottom: 0;
left: 0px;
right: 0;
width: auto;
height: auto;
}
.ih-item.circle.effect1 .img:before {
display: none;
}
.ih-item.circle.effect1.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6)
}
.ih-item.circle.effect1 .info {
top: 0px;
bottom: 0;
left: 0px;
right: 0;
background: #333;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 20px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect1 .info p {
color: #bbb;
padding: 11px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect1 a:hover .spinner {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.ih-item.circle.effect1 a:hover .info {
opacity: 1;
}
.row {
margin: 5px 0px 10px 5px;
padding: 10px 3px 30px 3px;
width: 1115px;
max-width: 100%;
display: flex;
flex-wrap: nonwrap;
align-content: center;
overflow-y: hidden;
overflow-x: auto;
background-color: rgba(238, 155, 195, 0.95);
}
.row img {
flex-shrink: 0;
}
.row2 {
margin: 5px 0px 5px 5px;
padding: 10px 3px 15px 3px;
width: 1115px;
max-width: 100%;
display: flex;
flex-wrap: nonwrap;
align-content: center;
overflow-y: hidden;
overflow-x: auto;
background-color: rgba(238, 46, 54, 0.95);
}
.col-sm-6 li {
padding: 10px 20px 10px 20px;
max-width: 33.3%;
}
a.effect-shine:hover {
-webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%);
-webkit-mask-size: 200%;
animation: shine 2s infinite;
}
#-webkit-keyframes shine {
from {
-webkit-mask-position: 150%;
}
to {
-webkit-mask-position: -50%;
}
<ul id="week1">
<ul class="row">
<img src="http://springfieldleather.com/assets/Scroll_Week1.1.png">
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Gator_Buckles.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>$5 Gator Buckle Sets</h3>
<p>Get a selection of 6-piece gator buckle sets for just $5. These opulent adornments are jewel encrusted and waiting to make your belt fancy!</p>
</div>
</div>
</a>
<P> Click here to see all styles! </p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Liz_CraftPack.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Liz's Craft Pack</h3>
<p>Explore the possibilities of leather craft with Liz's craft pack. Bursting at the seams with leather components, this not-so-little pack is only $25!</p>
</div>
</div>
</a>
<P> Get Liz's Craft Pack Here!</p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Stamping_Tools.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>25% Off Stamping Tools</h3>
<p>Transform your veg tan with stamping tools! For this month only, get select stamping tools at an even lower price! Nearly 100 tools are included!</p>
</div>
</div>
</a>
<P> Click here to view the selection!</p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_BeltBend_Black.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Black Belt Bends</h3>
<p>These Hermann Oak drum dyed belt bends are magnificent and they're on sale! Get them in black or brown. </p>
</div>
</div>
</a>
<P> Get Black Hermann Oak Belt Bend Here!</p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_BeltBend_Brown.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Brown Belt Bends</h3>
<p>These Hermann Oak drum dyed belt bends are magnificent and they're on sale! Get them in black or brown.</p>
</div>
</div>
</a>
<P> Get Brown Hermann Oak Belt Bend Here!</p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_VegTan_Split_Bundle.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Veg Tan Split Bundle</h3>
<p>Our new splitter has left us swimming in veg tan splits! Get this sweet bundle for just $15!</p>
</div>
</div>
</a>
<P> Get Your Veg Tan Split Bundle Here!</p>
</li>
<li class="col-sm-6">
<!-- normal -->
<div class="ih-item circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img src="http://springfieldleather.com/assets/Week1_Jr_LegalPad_Templete.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Legal Pad Poly Template</h3>
<p>We have finally done it! Poly templates for one of our favorite projects: leather covers! Cover your legal pad in luxury with this template for only $5.</p>
</div>
</div>
</a>
<P> Get Your Legal Pad Template Here!</p>
</li>
</ul>
</ul>
<hr>

opacity of p tag inside div on hover in the post

I am trying to make post in hover make transition in the top and bottom and I am using this code.
.moade3 {
margin: 100px;
width: 200px;
height: 300px;
}
.fo2 {
background: #000;
height: 1px;
opacity: 0;
position: absolute;
width: 200px;
transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0);
}
.block:hover > .fo2 {
height: 40px;
opacity: .3;
}
.block {
background: #B8B8B8;
height: 300px;
width: 200px;
}
.t7t {
background: #000000;
height: 1px;
position: absolute;
width: 200px;
opacity: 0;
transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0);
transform: rotatex(180deg);
transform-origin: top;
}
.block:hover > .t7t {
height: 100px;
opacity: .3;
}
.shame {
transform: rotatex(180deg);
opacity: 1;
font-weight: bold;
}
.link{
text-decoration: none;
color:#FFFFFF;
font-weight: bold;
}
.link:hover{
text-decoration: none;
color:#FFFFFF;
opacity: 1;
font-weight: bold;
}
<div class="moade3"> <a class="link" href="#">
<div class="block">
<div class="fo2 text-center"> Categories </div>
<img class="image" src="https://i2.wallpaperscraft.com/image/summer_trees_autumn_mountains_nature_84572_200x300.jpg">
<div class="t7t text-center">
<p class="shame">Name of post and Discraption Area</p>
<h5 class="shame"> Name of post </h5>
</div>
</div>
</a> </div>
The problem here is I can not make the opacity of <p> tag to 1,
opacity of div affects the paragraph
tags need to put it in full opacity is (.shame or p & h5)
it must be inside the div too.

If you use background:rgba(0,0,0,0.5) to set the background color instead of opacity and then setting it back to 0 alpha value you can achieve this. This also retains the smooth animation.
.moade3 {
margin: 100px;
width: 200px;
height: 300px;
}
.fo2 {
background: #000;
height: 1px;
opacity: 0;
position: absolute;
width: 200px;
transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0);
}
.block:hover > .fo2 {
height: 40px;
opacity: .3;
}
.block {
background: #B8B8B8;
height: 300px;
width: 200px;
}
.t7t {
height: 1px;
position: absolute;
width: 200px;
opacity: 1;
transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0);
transform: rotatex(180deg);
transform-origin: top;
}
.block:hover > .t7t {
height: 100px;
background:rgba(0, 0, 0, 0.51);
}
.block:hover .shame{
opacity:1;
}
.shame {
transform: rotatex(180deg);
opacity: 0;
font-weight: bold;
}
.link{
text-decoration: none;
color:#FFFFFF;
font-weight: bold;
}
.link:hover{
text-decoration: none;
color:#FFFFFF;
opacity: 1;
font-weight: bold;
}
<div class="moade3"> <a class="link" href="#">
<div class="block">
<div class="fo2 text-center"> Categories </div>
<img class="image" src="https://i2.wallpaperscraft.com/image/summer_trees_autumn_mountains_nature_84572_200x300.jpg">
<div class="t7t text-center">
<p class="shame">Name of post and Discraption Area</p>
<h5 class="shame"> Name of post </h5>
</div>
</div>
</a> </div>

Unfortunately any children of an element that has opacity changed on it will also be effected.
Why not use RGBA on the background instead like so:
.moade3 {
margin: 100px;
width: 200px;
height: 300px;
}
.fo2 {
background: rgba(0, 0, 0, 0.3);;
height: 1px;
opacity: 0;
position: absolute;
width: 200px;
transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0);
}
.block:hover > .fo2 {
height: 40px;
opacity: 1;
}
.block {
background: #B8B8B8;
height: 300px;
width: 200px;
}
.t7t {
background: rgba(0, 0, 0, 0.3);
height: 1px;
position: absolute;
width: 200px;
opacity: 0;
transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0);
transform: rotatex(180deg);
transform-origin: top;
}
.block:hover > .t7t {
height: 100px;
opacity: 1;
}
.shame {
transform: rotatex(180deg);
opacity: 1;
font-weight: bold;
}
.link{
text-decoration: none;
color:#FFFFFF;
font-weight: bold;
}
.link:hover{
text-decoration: none;
color:#FFFFFF;
opacity: 1;
font-weight: bold;
}
<div class="moade3"> <a class="link" href="#">
<div class="block">
<div class="fo2 text-center"> Categories </div>
<img class="image" src="https://i2.wallpaperscraft.com/image/summer_trees_autumn_mountains_nature_84572_200x300.jpg">
<div class="t7t text-center">
<p class="shame">Name of post and Discraption Area</p>
<h5 class="shame"> Name of post </h5>
</div>
</div>
</a> </div>