Does anyone of you know how to create this gallery box and text (with the line) from the image?
Can you help me, please?
I want to learn how to create this gallery box and add a magnifier icon when I hover over the image.
I also want to open the image when I click on it, in full size if possible.
May you please help me with this?
Thank you all for trying to help me, I did this, and it's working. Although I didn't add a magnifier icon on hover.
<div id="portfolio">
<div class="container-fluid w-75">
<div class="row">
<h3 style="color: #bb9754;"> Spoljašnost zgrade </h3>
<hr style="background-color: #bb9754;">
<div class="col-lg-2 col-md-4 col-6 my-3">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/1.jpg" title="Project Name">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="..." />
</a>
</div>
</div>
</div>
</div>
Hope this helps:
.container {
width: "80vw";
margin: "0 auto";
}
.heading {
display: flex;
align-items: center;
}
.text {
flex-basis: 15%;
}
.divider {
content: "";
height: 4px;
background: #000;
width: 100%;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
height: 100px;
max-width: 100px;
margin: 20px;
}
<div class="container">
<div class="heading">
<div class="text">
TEXT
</div>
<div class="divider"></div>
</div>
<div class="gallery">
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
</div>
</div>
#title{
font-size:20px;
color:#A5A195;
display:flex;
justify-content:center;
}
#item{
display:flex;
flex-flow:row wrap;
}
.img{
width:150px;
border-radius:15px;
margin-right: 50px;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
<div id="title">
SPOLJASNJOST ZGRADE
</div>
<hr>
<div id="item">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
</div>
</body>
</html>
Related
Hello i am trying to replicate youtube. I am coding and aligning video list. I added video title. But the problem is video title is not showing properly. video title width alignment is not proper. the video title is showing on the top of other videos. video title exceed the width. i want the video title to fit with in the video. Kindly help me to fix this.
body{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.flexbox{
display: flex;
align-items: center;
}
nav{
padding: 10px 2%;
justify-content: space-between;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: #fff;
position: static;
top: 0;
z-index: 10;
}
.navright img{
width: 25px;
margin-right: 25px;
}
.navright .profile{
width: 30px;
border-radius: 30px;
}
.navleft .menuicon{
width: 25px;
}
.navleft .logo{
width: 130px;
padding-left: 20px;
}
.navmiddle .voice{
width: 16px;
}
.navmiddle .search{
width: 16px;
}
.navmiddle .searcharea{
border: 1px solid #ccc;
margin-right: 15px;
padding: 8px 12px;
border-radius: 25px;
}
.navmiddle .searchbox{
width: 400px;
}
.sidebar{
background: #fff;
width: 15%;
height: 100vh;
position: fixed;
padding-left: 2%;
padding-top: 20px;
z-index: -10;
}
.shortcuts a img{
width: 20px;
margin-right: 20px;
}
.shortcuts a{
display: flex;
align-items: center;
flex-wrap: wrap;
text-decoration: none;
width: fit-content;
}
.shortcuts a:first-child{
color: red;
}
.sidebar hr{
border: 0;
width: 85%;
height: 1px;
background: #ccc;
}
.small-sidebar{
width: 5%;
height: 200px;
}
.container{
padding-left: 17%;
padding-right: 2%;
padding-top: 20px;
padding-bottom: 20px;
}
.container .banner{
width: 100%;
}
.small-sidebar p{
display: none;
}
.flexbox .channelpic{
border-radius: 40px;
width: 50px;
}
.listcontainer{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
grid-column-gap: 16px;
grid-row-gap: 30px;
margin-top: 15px;
}
.vidlist .thumbnail{
width: 100%;
border-radius: 5px;
}
.vidlist .flexbox{
align-items: flex-start;
margin-top: 7px;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="flexbox">
<div class="navleft flexbox">
<img src="/images/menu.png" alt="" class="menuicon" >
<img src="/images/logo.png" alt="" class="logo" >
</div>
<div class="navmiddle flexbox">
<div class="searcharea">
<input type="text" placeholder="Search" class="searchbox">
<img src="/images/search.png" alt="" class="search" >
</div>
<img src="/images/voice-search.png" alt="" class="voice" >
</div>
<div class="navright">
<img src="/images/upload.png" alt="" >
<img src="/images/notification.png" alt="" >
<img src="/images/simon.png" alt="" class="profile">
</div>
</nav>
<!---sidebar-->
<div class="sidebar">
<div class="shortcuts">
<img src="images/home.png" alt="" srcset=""><p>Home</p>
<img src="images/explore.png" alt="" srcset=""><p>Explore</p>
<img src="images/subscriprion.png" alt="" srcset=""><p>Subscription</p>
<img src="images/library.png" alt="" srcset=""><p>Library</p>
<img src="images/history.png" alt="" srcset=""><p>History</p>
<img src="images/playlist.png" alt="" srcset=""><p>Playlist</p>
<img src="images/messages.png" alt="" srcset=""><p>Messages</p>
<hr>
</div>
<div class="subscriptionlist">
<h1>Subscription</h1>
<img src="/images/tom.png" alt="" srcset=""><p>Tom Hardy</p>
<img src="/images/Jack.png" alt="" srcset=""><p>Jack Nichol</p>
<img src="/images/gerard.png" alt="" srcset=""><p>Gerard Pique</p>
<img src="/images/megan.png" alt="" srcset=""><p>Megan Steve </p>
</div>
</div>
<div class="container">
<div class="banner">
<img src="/images/banner.png" alt="" >
</div>
<div class="listcontainer">
<div class="vidlist">
<img src="/images/thumbnail1.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail2.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail3.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail4.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail5.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail6.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail7.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail8.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Just add word-break:break-all to .vidinfo > a.
.vidinfo > a {
word-break: break-all;
}
I can't manage to center these divs as I would.
I would like to have all icons aligned vertically and the same for the text in order to have something like that :
The logo picture is a simple <img> tag and the text is a <h4> tag.
If someone is able to help me with this please, I am stuck for a long time on this problem...
Thank you !
Flexbox is great for this sort of thing. You can use align-items:center; to center everything within the flex container vertically and you can use justify-content:center; to center horizontally.
.item {
display:flex;
align-items:center;
justify-content:center;
}
.item-text {
line-height:1rem;
margin-left:10px;
}
<div class="container">
<div class="item">
<div class="item-image"><img src="https://via.placeholder.com/50" /></div>
<h4 class="item-text">Lorem Ipsum</h4>
</div>
<div class="item">
<div class="item-image"><img src="https://via.placeholder.com/50" /></div>
<h4 class="item-text">Lorem Ipsum</h4>
</div>
<div class="item">
<div class="item-image"><img src="https://via.placeholder.com/50" /></div>
<h4 class="item-text">Lorem Ipsum</h4>
</div>
</div>
Add the previous code, adjust the width from img and h4
.item {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
}
.item-text {
line-height: 1rem;
margin-left: 10px;
}
.item-image {
display: flex;
flex-direction: row-reverse;
width: 30%;
}
h4 {
width: 60%;
}
<!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" />
<title>Document</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div class="container">
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">Html</h4>
</div>
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">MongoDB</h4>
</div>
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">Java</h4>
</div>
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">C</h4>
</div>
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">C++</h4>
</div>
</div>
</body>
</html>
I am trying to push a div with images underneath a couple of arrow icons, that do not take up a whole row, as seen below. However, the images underneath keep wrapping in between the arrows, which is not the desired result. I was wondering if someone can please advise how to fix this? The example I inserted only works in narrower viewports because I pulled it from my mobile site I am working on. I am confused why two separate divs are overlapping in this way. Thanks in advance.
#photo-viewer-outer-wrap div {
display: inline;
}
#photo-viewer-inner-wrap-left img {
max-width: 100%;
}
#photo-viewer-inner-wrap-right {
display: flex;
overflow-y: scroll;
max-height: 300px;
clear: both;
}
#photo-viewer-inner-wrap-right img {
max-width: 30%;
}
#left-arrow {
float: left;
width: 30px;
margin-left: 10px;
}
#right-arrow {
float: right;
width: 30px;
margin-right: 10px;
}
<div id="photo-viewer-outer-wrap">
<div id="photo-viewer-inner-wrap-left">
<img src="https://www.russorizio.com/wp-content/uploads/2016/07/ef3-placeholder-image.jpg" />
<img src="https://www.iconpacks.net/icons/2/free-arrow-right-icon-2817-thumb.png" id="right-arrow" title="Next image" alt="next image" />
<img src="https://static.vecteezy.com/system/resources/thumbnails/000/365/868/small/Basic_Elements__28113_29.jpg" id="left-arrow" title="Previous image" alt="previous image" />
</div>
<div id="photo-viewer-inner-wrap-right">
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
</div>
</div>
I used flex for you. No need to float and display: inline:
#photo-viewer-inner-wrap-left {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#photo-viewer-inner-wrap-left img:first-child {
width: 100%;
}
#left-arrow {
width: 30px;
height: 30px;
margin: 20px 0 20px 10px;
}
#right-arrow {
width: 30px;
height: 30px;
margin: 20px 10px 20px 0;
}
#photo-viewer-inner-wrap-right {
display: flex;
flex-wrap: wrap;
overflow-y: scroll;
max-height: 300px;
}
#photo-viewer-inner-wrap-right img {
width: 33.33%;
}
<div id="photo-viewer-outer-wrap">
<div id="photo-viewer-inner-wrap-left">
<img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg" />
<img src="https://static.vecteezy.com/system/resources/thumbnails/000/365/868/small/Basic_Elements__28113_29.jpg" id="left-arrow" title="Previous image" alt="previous image" />
<img src="https://www.iconpacks.net/icons/2/free-arrow-right-icon-2817-thumb.png" id="right-arrow" title="Next image" alt="next image" />
</div>
<div id="photo-viewer-inner-wrap-right">
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
</div>
</div>
you are using display inline property in a div which force div to take as much as space it needs and allows another div to join it. check these for learning display properties link2
check this also
#photo-viewer-outer-wrap div {
display: block;
}
#photo-viewer-inner-wrap-left img {
max-width: 100%;
}
#photo-viewer-inner-wrap-right {
display: flex;
overflow-y: scroll;
max-height: 300px;
clear: both;
}
#photo-viewer-inner-wrap-right img {
max-width: 30%;
}
#left-arrow {
float: left;
width: 30px;
margin-left: 10px;
}
#right-arrow {
float: right;
width: 30px;
margin-right: 10px;
}
<div id="photo-viewer-outer-wrap">
<div id="photo-viewer-inner-wrap-left">
<img src="https://www.russorizio.com/wp-content/uploads/2016/07/ef3-placeholder-image.jpg" />
<img src="https://www.iconpacks.net/icons/2/free-arrow-right-icon-2817-thumb.png" id="right-arrow" title="Next image" alt="next image" />
<img src="https://static.vecteezy.com/system/resources/thumbnails/000/365/868/small/Basic_Elements__28113_29.jpg" id="left-arrow" title="Previous image" alt="previous image" />
</div>
<div id="photo-viewer-inner-wrap-right">
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
</div>
</div>
I am having some trouble making a responsive list of images. My objectives is:
On desktop resolutions 1000px and greater:
I need one line of images that never wraps and images always fit. I
can accomplish that with this:
HTML
<div id="partners" class="col-md-6">
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
</div>
CSS
#partners {
background-color: #eee;
white-space: nowrap;
width: 100%;
display: table;
}
.logo-image {
vertical-align: middle;
display: table-cell;
border: solid 1px #F00;
}
.logo-image img {
max-width: 100%;
}
#media (min-width:1000px) {
#partners {
}
.logo-image {
}
}
On smaller screens:
the blocks drop down (responsive)
But as users access this page on mobile devices those blocks get smaller. So I tried to make the image retain normal size then drop down by removing the partners css when the screen width is anything less than 1000px but that doesnt seem to work.
#media (max-width:1000px) {
#partners {
}
.logo-image {
}
}
here is my fiddle
I've been trying all week so far and at wits end, at this point I'm not sure it can be done.
You can simply make the display: block; to remove the inline display.
Check the updated code here:
#partners {
background-color: #eee;
white-space: nowrap;
width: 100%;
display: table;
}
.logo-image {
vertical-align: middle;
display: table-cell;
border: solid 1px #F00;
}
.logo-image img {
max-width: 100%;
}
#media (max-width:1000px) {
#partners {
}
.logo-image {
float:left;
}
}
<div id="partners" class="col-md-6">
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
</div>
here is a simplified version of your Fiddle, just using float:left/none
#partners {
background-color: #eee;
}
img {
float: left;
border: solid 1px red !important;
}
#media (max-width: 1000px) {
img {
float: none;
display:block;
margin:auto
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div id="partners" class="col-xs-12 col-md-12">
<img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
<img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
<img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
<img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
<img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
<img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
</div>
I have a page where I'd like to have a row of circular images with text on them that can serve as links. I've figured out how to get this to work for the general case of a full sized webpage, but when I resize the width of the page, the text doesn't scale with the image because I have to use absolute positions. Here's the html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
</div>
</div>
</body>
</html>
Here's the main.css page...
body {
max-width: 900px;
margin: 0 auto;
}
.container {
width: 100%;
}
.button-pic {
opacity: 0.4;
position: relative;
}
.button-caption {
text-align: center;
position: absolute;
top: 87px;
left: 85px;
}
I'd like to find a way to not have to set the top and left positions of the button-caption since not all of my labels will be the same length. Anyone have advice to offer?
If you want your text position to remain consistent to the image you'll need to use percentages instead of setting a fixed amount of pixels for the position since the images are responsive.
See working Snippet.
.content {
max-width: 900px;
margin: auto;
}
.button-pic {
opacity: 0.4;
position: relative;
margin: auto;
}
.button-caption {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Just a Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Just a Really Very Pretty Long Label for a Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">A Button</span>
</a>
</div>
</div>
</div>
</div>