So I'm working on a Instagram gallery for my website, and initially I was having issues with getting the images to "pop-out" on hover without being cut-off (the image was being cropped instead of enlarging) which I have since figured out.
Now I have a new issue. In-between the Instagram feed and a homemade picture carousel, I have some text titles dividing the two, so the format is:
Instagram Feed (title)
(actual picture feed)
line break <br>
Gallery (title)
(actual carrousel)
line break <br>
For some reason, the line breaks I put in before the Gallery Title aren't working now. The issue seems to be with the css for my Instagram feed.
I literally have to put like 20 of them <br> for the gallery title to move down. What I have noticed is that when I switch from "inline" to "block" on my
#instagram-feed1 {
display: inline;
}
class the breaks work, but then my images get cropped on hover again.
Not sure what the issue is. See my html markup and CSS below.
// HTML
<div class="div3">
<div class="card-header headers">
<h2>Pictures</h2>
</div>
<br>
<div class="card-body">
<div class="card-subtitle">
<h3>On Instagram <img style="width: 40px;" src="./Images/instagram_logo.png" alt="instagram logo"></h3>
</div>
<div id="instagram-feed1" class="instagram_feed"></div>
<br>
<div class="card-subtitle">
<h3>Gallery <img style="width: 40px;" src="./Images/gallery-icon.png" alt="gallery icon"></h3>
</div>
<div id="gallery">
<div class="col">
<div class="row">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-label="Slide 6"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6" aria-label="Slide 7"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./Images/Feudale-3.png" class="gallery-image" alt="FEUDALE LOGO">
</div>
<div class="carousel-item">
<img src="./Images/DAVE.jpg" class="gallery-image" alt="PHOTO OF DAVE">
</div>
<div class="carousel-item">
<img src="./Images/BRY.jpg" class="gallery-image" alt="PHOTO OF BRY">
</div>
<div class="carousel-item">
<img src="./Images/MIKE.jpg" class="gallery-image" alt="PHOTO OF MIKE">
</div>
<div class="carousel-item">
<img src="./Images/EPK1.jpg" class="gallery-image" alt="PHOTO OF BAND">
</div>
<div class="carousel-item">
<img src="./Images/EPK2.jpg" class="gallery-image" alt="PHOTO OF BAND">
</div>
<div class="carousel-item">
<img src="./Images/FEUDALE_edit2.png" class="gallery-image" alt="PHOTO OF BAND">
</div>
</div>
<br>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
// CSS
/* INSTAGRAM FEED */
.instagram_feed {
overflow: hidden;
position: relative;
}
#instagram-feed1 {
display: inline;
}
.instagram_feed .instagram_new {
width:25%;
float:left;
padding: 0 5px 5px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.instagram_feed img.insta-image {
position: absolute;
left:0;
top:0;
object-fit: cover;
width:100%;
height:100%;
transition:all 0.3s ease0s;
-webkit-transition:all 0.3s ease0s;
-moz-transition:all 0.3s ease0s;
-ms-transition:all 0.3s ease0s;
-o-transition:all 0.3s ease0s;
}
.instagram_feed .insta-link {
position:relative;
display:block;
background:#232323;
padding-top:100%;
/* margin-top: 5%;
margin-bottom: 5%;
margin-left: 5%;
margin-right: 5%; */
}
.instagram_feed .insta-link:hover .insta-image {
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(2,2);
opacity: 100;
background-color: rgb(41,47,51, .0);
position: absolute;
object-fit:contain;
display: inline;
z-index:999;
visibility: visible;
transition-property: all;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
}