I want to make unequal images heights and keep the layout the same on resize without changing the aspect ratio of the image on here is what i want to do :
https://i.ibb.co/nkSXJ4f/Screen-Shot-2019-04-12-at-6-32-32-AM.png
I know this is ease with css grid but i think i can make my code more simple since the layout is not complicated
What i've tried
body {
height: 100%;
}
.card {
margin-right: 20px;
margin-bottom: 2.6668rem;
display: inline-block;
vertical-align: top;
}
.medium {
width: 65%;
margin-right: 5%;
height: 600px;
overflow: hidden;
}
.small {
width: 25%;
height: 300px;
overflow: hidden;
}
img {
width: 100%;
}
<main class="grid">
<a href="" class="card medium">
<figcaption class="caption">project title</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
<a href="" class="card small">
<figcaption class="caption">Kettle</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
</main>
Try this code
body {
height: 100%;
}
*{
box-sizing:border-box;
}
.card {
margin-right: 20px;
vertical-align: top;
height:100vh;
display: block;
overflow: hidden;
}
.medium {
width: 65%;
margin-right: 5%;
float:left
}
.small {
width: 25%;
float:left
}
.card-image { height:100%; }
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<main class="grid">
<a href="" class="card medium">
<figcaption class="caption">project title</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
<a href="" class="card small">
<figcaption class="caption">Kettle</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
</main>
Related
I have a responsive image grid, which is working fine and i am happy with.
Now i would like to add hover effects to the images so that a white semi-transparent filter is applied and text appears over the images with further details on the image.
I would also like the images to be modal and popup when clicked on.
It seems when i apply the hover effects the popup image stops working.
Can anybody tell me what is going wrong?
NOTE: I'm aware that hover effects have not been applied to all the images. This is because i didnt bother when i realised it wasnt functioning.
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => {
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = event.target.src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
img {
border: 2px solid;
min-height: 100px;
min-width: 100px;
}
body {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
font-family: verdana
}
/*MAIN*/
main {
margin: 200px 0 100px 0;
height: auto;
max-width: 1024px;
color: #66704D;
letter-spacing: 3px;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px 4px 2%;
}
.column {
flex: 31.3%;
max-width: 31.3%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/*overlay*/
.container {
position: relative;
width: 100%;
}
.ImgThumbnail {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(255,255,255,0.9);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: #66704d;
font-size: 20px;
letter-spacing: 5px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
/*modal*/
.ImgThumbnail {
cursor: pointer;
transition: 0.3s;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(255, 255, 255,0.85);
}
.modalImage {
margin: auto;
display: block;
width: 100%;
height: auto;
max-width: 1024px;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #66704d;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.modalImage {
width: 100%;
}
}
/*Tablet*/
#media (max-width:768px) {
.column {
flex: 47%;
max-width: 47%;
}
/*Mobile*/
#media (max-width:400px) {
.column {
flex: 100%;
max-width: 100%;
}
}
<html>
<body>
<!--MAIN CONTENT-->
<main>
<div class="row">
<div class="column">
<div class="container">
<img class="ImgThumbnail" src="images/Painting/Oranges in Berlin.jpg" alt="">
<div class="overlay">
<div class="text">caption content</div>
</div>
</div>
<img class="ImgThumbnail" src="images/Painting/Bread Rolls.jpeg" alt="">
<img class="ImgThumbnail" src="images/Painting/the Market.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Life Drawing with card.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Copy of The Carrofs IV.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The Carrofs I.JPG" alt="">
<img class="ImgThumbnail" src="images/Painting/The Trig, from memory.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The Beacon.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Farm on the Hill.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Terrace Sunlight.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Across the Road.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Back Lane I.jpg" alt="">
</div>
<div class="column">
<img class="ImgThumbnail" src="images/Painting/Cloud Study.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/ London Bodies.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The Cloud.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Life Drawing II.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Copy of The Carrofs III.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The cow Field.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Bridal Veil, from memory.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The Sheep_s Pool.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Bunyan_s Valley.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Terrace Sunlight Study II .jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The Back Lane.jpg" alt="">
</div>
<div class="column">
<img class="ImgThumbnail" src="images/Painting/Maria_s House.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/on The Tube.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Ben.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Life Drawing I.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The Carrofs II.JPG" alt="">
<img class="ImgThumbnail" src="images/Painting/Aotea Harbor.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Aotea from description I.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The Valley.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Bunyans Oak.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Terrace Sunlight Study I.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Back Lane II.jpg" alt="">
</div>
</div>
<div class="modal">
<span class="close">×</span>
<img class="modalImage" id="img01">
</div>
</main>
</body>
</html>
Welcome to the forum :)
It sounds like when the cursor is hovering over your image, the hover state is essentially layered on top of your clickable image element and therefore blocking the user from clicking it and activating the pop-up modal. Try adding your listener to your hover state element as well, or grouping the caption with the image so they can both be clicked on. I've paired down your example for this snippet below.
Cheers!
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".overlay")).forEach(item => {
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = event.target.parentNode.querySelector(".ImgThumbnail").src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
body {
color: #66704D;
letter-spacing: 3px;
}
/*overlay*/
.container {
position: relative;
width: 300px;
height: 200px;
}
.ImgThumbnail {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(255, 255, 255, 0.9);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: #66704d;
font-size: 20px;
letter-spacing: 5px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
/*modal*/
.ImgThumbnail {
cursor: pointer;
transition: 0.3s;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(255, 255, 255, 0.85);
}
.modalImage {
margin: 0 auto;
display: block;
width: 80%;
height: auto;
max-width: 1024px;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #66704d;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.modalImage {
width: 100%;
}
}
<div class="container">
<div class="imgGroup">
<img class="ImgThumbnail" src="https://placehold.it/300x200" alt="">
<div class="overlay">
<div class="text">caption content</div>
</div>
</div>
</div>
<div class="modal">
<span class="close">×</span>
<img class="modalImage" id="img01">
</div>
Check out demo: https://codepen.io/turibamwe/pen/xxwGozx
use this javascript:
<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail + .overlay")).forEach(item => {
var itemImage = item.parentNode.firstElementChild.getAttribute("src");
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = itemImage//event.target.src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
</script>
I have created a video gallery to show 4 videos in a tabbed manner.
Functionality is working fine and design is also working but i need add pointer/arrow pointing to active video in the second column
// Video Tabs script
InitPlayVideoTabs();
function InitPlayVideoTabs() {
$('.hp-video-a').click(function (e) {
// alert('inside function');
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="100%" class="hp-active-iframe" min-height="324" src="http://www.youtube.com/embed/' + URL + '?showinfo=0&autoplay=1" frameborder="0" allowfullscreen="1" ></iframe>';
$('.hp-video-a').css("background","none");
$(this).css("background","#eee");
//code to autoplay video
//$(".hp-active-iframe")[0].src += "&autoplay=1";
//ev.preventDefault();
// alert(URL);
$(".hp-active-video-title").html($(this).find(".hp-video-title").html());
$(".hp-active-video-date").html($(this).find(".hp-video-date").html());
$('.hp-active-iframe').attr('src', URL);
return false;
});
}
.full-container{width:100%;}
.full-container {
width: 100%;
margin: 25px 0;
padding: 25px 0;
}
.content-wrapper{
padding-top:0px;
background-color:none;
max-width:1040px;
max-width:1170px;
}
.hp-video-embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 0px;
}
.hp-video-left-col{}
.hp-video-right-col a:first-child{ background-color:#ddd;}
.hp-video-right-col a:last-child{ margin-bottom:0px;}
.hp-active-iframe-wrapper {
float: left;
width: 100%;
background-color: #f5f5f5;
}
.hp-video-embed-container iframe, .hp-embed-container object, .hp-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hp-video-item-w{
background-color:#ccc;
}
.hp-hqdefault-w {
max-height: 66px;
max-width: 120px;
overflow: hidden;
position: relative;
width:30%;
}
.hp-video-img-w {
position: relative;
width: 100%;
overflow: hidden;
float:left;
}
.hp-video-details{
width:65%;
float:left;
}
.hp-video-title{
font-size:20px;
margin-top:0px;
margin-left:10px;
}
.hp-video-title{
font-size:13px;
font-weight:700;
padding-top:10px;
margin-top:0px;
margin-left:10px;
}
.hp-video-a{
display:inline-block;
width:100%;
margin-bottom:7px;
}
#media (max-width:991px)
{
.hp-video-left-col{
width:100%;
}
.hp-video-right-col {
width:100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-container bg-light-gray">
<div class="container content-wrapper">
<div class="row">
<div class="col-md-7 col-sm-6 hp-video-left-col">
<div class="hp-active-iframe-wrapper hp-video-embed-container">
<iframe id='activeIFrame' class='hp-active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1" ></iframe>
</div>
</div>
<div class="col-md-5 col-sm-6 hp-video-right-col">
<a class="hp-video-a" href="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/WzQBSlNqs-k/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road ONE </h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/uKar-9RCRnI?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/uKar-9RCRnI/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road TWOOOOOO</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Three</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/zUTi89FhSRo?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/zUTi89FhSRo/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Four</h3>
</div>
</a>
</div>
</div>
</div>
</div>
Edit: Code indentation fixed for code
IMAGE
CodePen https://codepen.io/anon/pen/dePoLr
You can use a class to add the triangle. I've documented in the sources what I have added/removed/changed. The HTML is untouched.
You just need to set the triangle for the initial load.
// Video Tabs script
InitPlayVideoTabs();
function InitPlayVideoTabs() {
$('.hp-video-a').click(function(e) {
// alert('inside function');
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="100%" class="hp-active-iframe" min-height="324" src="http://www.youtube.com/embed/' + URL + '?showinfo=0&autoplay=1" frameborder="0" allowfullscreen="1" ></iframe>';
$('.hp-video-a').css("background", "none");
$(this).css("background", "#eee");
$(".hp-active-video-title").html($(this).find(".hp-video-title").html());
$(".hp-active-video-date").html($(this).find(".hp-video-date").html());
$('.hp-active-iframe').attr('src', URL);
/* Added */
$('.hp-video-img-w.hp-hqdefault-w').removeClass("active");
$(this).find('.hp-video-img-w.hp-hqdefault-w').addClass("active");
return false;
});
}
.full-container {
width: 100%;
}
.full-container {
width: 100%;
margin: 25px 0;
padding: 25px 0;
}
.content-wrapper {
padding-top: 0px;
background-color: none;
max-width: 1040px;
max-width: 1170px;
}
.hp-video-embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 0px;
}
.hp-video-left-col {}
.hp-video-right-col a:first-child {
background-color: #ddd;
}
.hp-video-right-col a:last-child {
margin-bottom: 0px;
}
.hp-active-iframe-wrapper {
float: left;
width: 100%;
background-color: #f5f5f5;
}
.hp-video-embed-container iframe,
.hp-embed-container object,
.hp-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hp-video-item-w {
background-color: #ccc;
}
.hp-hqdefault-w {
max-height: 66px;
max-width: 120px;
/* overflow: hidden; removed */
position: relative;
width: 30%;
}
.hp-video-img-w {
position: relative;
width: 100%;
/* overflow: hidden; removed */
float: left;
}
/* Added */
.hp-video-img-w.hp-hqdefault-w.active::before {
content: "";
position: absolute;
left: -30px;
top: 25px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 30px;
border-color: transparent transparent transparent red;
}
.hp-video-details {
width: 65%;
float: left;
}
.hp-video-title {
font-size: 20px;
margin-top: 0px;
margin-left: 10px;
}
.hp-video-title {
font-size: 13px;
font-weight: 700;
padding-top: 10px;
margin-top: 0px;
margin-left: 10px;
}
.hp-video-a {
display: inline-block;
width: 100%;
margin-bottom: 7px;
}
#media (max-width:991px) {
.hp-video-left-col {
width: 100%;
}
.hp-video-right-col {
width: 100%;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-container bg-light-gray">
<div class="container content-wrapper">
<div class="row">
<div class="col-md-7 col-sm-6 hp-video-left-col">
<div class="hp-active-iframe-wrapper hp-video-embed-container">
<iframe id='activeIFrame' class='hp-active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1"></iframe>
</div>
</div>
<div class="col-md-5 col-sm-6 hp-video-right-col">
<a class="hp-video-a" href="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/WzQBSlNqs-k/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road ONE </h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/uKar-9RCRnI?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/uKar-9RCRnI/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road TWOOOOOO</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Three</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/zUTi89FhSRo?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/zUTi89FhSRo/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Four</h3>
</div>
</a>
</div>
</div>
</div>
</div>
Can you check this:
I have added few code:
In CSS:
.hp-video-right-col a:active i.right, .hp-video-right-col a:focus i.right{
border: solid black;
border-width: 0 6px 6px 0;
display: inline-block;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
In code inside all a tags:
<div style="float:left; padding-right:10px; padding-top:25px">
<i class="right"></i>
</div>
Working fiddle is below:
// Video Tabs script
InitPlayVideoTabs();
function InitPlayVideoTabs() {
$('.hp-video-a').click(function(e) {
// alert('inside function');
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="100%" class="hp-active-iframe" min-height="324" src="http://www.youtube.com/embed/' + URL + '?showinfo=0&autoplay=1" frameborder="0" allowfullscreen="1" ></iframe>';
$('.hp-video-a').css("background", "none");
$(this).css("background", "#eee");
//code to autoplay video
//$(".hp-active-iframe")[0].src += "&autoplay=1";
//ev.preventDefault();
// alert(URL);
$(".hp-active-video-title").html($(this).find(".hp-video-title").html());
$(".hp-active-video-date").html($(this).find(".hp-video-date").html());
$('.hp-active-iframe').attr('src', URL);
return false;
});
}
.full-container {
width: 100%;
}
.full-container {
width: 100%;
margin: 25px 0;
padding: 25px 0;
}
.content-wrapper {
padding-top: 0px;
background-color: none;
max-width: 1040px;
max-width: 1170px;
}
.hp-video-embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 0px;
}
.hp-video-left-col {}
.hp-video-right-col a:first-child {
background-color: #ddd;
}
.hp-video-right-col a:active i.right,
.hp-video-right-col a:focus i.right {
border: solid black;
border-width: 0 6px 6px 0;
display: inline-block;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.hp-video-right-col a:last-child {
margin-bottom: 0px;
}
.hp-active-iframe-wrapper {
float: left;
width: 100%;
background-color: #f5f5f5;
}
.hp-video-embed-container iframe,
.hp-embed-container object,
.hp-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hp-video-item-w {
background-color: #ccc;
}
.hp-hqdefault-w {
max-height: 66px;
max-width: 120px;
overflow: hidden;
position: relative;
width: 30%;
}
.hp-video-img-w {
position: relative;
width: 100%;
overflow: hidden;
float: left;
}
.hp-video-details {
width: 65%;
float: left;
}
.hp-video-title {
font-size: 20px;
margin-top: 0px;
margin-left: 10px;
}
.hp-video-title {
font-size: 13px;
font-weight: 700;
padding-top: 10px;
margin-top: 0px;
margin-left: 10px;
}
.hp-video-a {
display: inline-block;
width: 100%;
margin-bottom: 7px;
}
#media (max-width:991px) {
.hp-video-left-col {
width: 100%;
}
.hp-video-right-col {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-container bg-light-gray">
<div class="container content-wrapper">
<div class="row">
<div class="col-md-7 col-sm-6 hp-video-left-col">
<div class="hp-active-iframe-wrapper hp-video-embed-container">
<iframe id='activeIFrame' class='hp-active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1"></iframe>
</div>
</div>
<div class="col-md-5 col-sm-6 hp-video-right-col">
<a class="hp-video-a" href="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1">
<div style="float:left; padding-right:10px; padding-top:25px"><i class="right"></i></div>
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/WzQBSlNqs-k/hqdefault.jpg" style="clear:both;" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road ONE </h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/uKar-9RCRnI?showinfo=0&modestbranding=1">
<div style="float:left; padding-right:10px; padding-top:25px"><i class="right"></i></div>
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/uKar-9RCRnI/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road TWOOOOOO</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
<div style="float:left; padding-right:10px; padding-top:25px"><i class="right"></i></div>
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Three</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/zUTi89FhSRo?showinfo=0&modestbranding=1">
<div style="float:left; padding-right:10px; padding-top:25px"><i class="right"></i></div>
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/zUTi89FhSRo/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Four</h3>
</div>
</a>
</div>
</div>
</div>
</div>
codepen : https://codepen.io/anon/pen/mLyeBP
I want to have a slideshow with next image div that is to be cut in 40-50%.
It means that the next image to be shown has to be cut 40-50% so that it looks like a slideshow.
.slideshow_image_div {
height: 300px;
border: thin black solid;
width: 300px;
overflow: hidden;
}
.slideshow_image_div .slideshow_images {
float: left;
width: 45%;
margin-right: 10px;
}
.slideshow_images img {
max-width: 100%;
max-height: 100%;
}
<div class="slideshow_image_div b">
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
</div>
If you want the whole slide to appear in the same line, you can give white-space: nowrap and removed float along with giving a display: inline-block and removed the hard-coded height, so that it really looks like a slide container:
.slideshow_image_div {
border: thin black solid;
padding: 5px 0 0 5px;
width: 300px;
overflow: hidden;
white-space: nowrap;
}
.slideshow_image_div .slideshow_images {
display: inline-block;
width: 40%;
margin-right: 5px;
}
.slideshow_images img {
max-width: 100%;
max-height: 100%;
}
<div class="slideshow_image_div b">
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
</div>
I created this code for a slider. When I hover the thumbnail image it shows me image, but I need to create an automatic slider. How can i do this?
/******************************************************************************************************/
.sliderconteainer {
width: 100%;
position: relative;
border: 2px double silver;
border-radius: 5px;
}
.thmbnail {
width: 25%;
height: 100px;
float: left;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
float: right;
left: 0;
top: 0;
opacity: 0;
}
.slide img {
height: 300px;
width: 100%;
}
.thmbnail img {
width: 100%;
height: 95%;
border: 2px solid #EEEEEE;
border-radius: 5px;
}
.content-placeholder {
width: 100%;
height: 300px;
}
.info {
background-color: black;
z-index: 99;
margin-top: -66px;
position: absolute;
width: 100%;
padding-right: 10px;
opacity: .75;
border-radius: 5px;
}
.info p {
color: #ABB3BD;
font-family: 'B Mitra';
}
.info h5 {
font-family: 'B Titr';
color: #ffffff;
}
.thmbnail:hover .slide {
opacity: 1;
}
.thmbnail:hover .thmbnail img {
border: 2px solid #56656E;
}
#main {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class=" sliderconteainer col-md-5 col-sm-5">
<div class="content-placeholder"></div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/SiteDesign/profile.jpg" class="img-responsive"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/SiteDesign/profile.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/8.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/8.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/image-slider-2.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/image-slider-2.jpg"/>
</div>
<div class="thmbnail ">
<div class="slide">
<img src="~/Image/Slider/Megumi-4565.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/Megumi-4565.jpg"/>
</div>
</div>
</div>
If you want to change things automatically, you can use the build-in JavaScript function setInterval(xfunction, xInterval), which calls xFunction, every xInterval
setInterval(function() {
console.log("MOVE IT");
moveLeft();
}, 1000);
As #dennis-koch mentioned, I would also have a look at plugins you may use for a slider.
I'm having troubles in making an image box(width:100%) similar to the one i have uploaded.
The problem is that: I want an image box which contains diffrent images . They are displayed in "inline-block" attribute with fixed width and height.When I click on one image a div should popup(containing that image and occupying full width.)below the image without affecting the position of other images.
Please tell me how should i place the popup div below the image without affecting other images' position.
Imagebox with different images
body,html{
margin: 0;
padding: 0;
background-color: #ffffff;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
color: #a6a6a6;
}
.clear{
clear: both;
}
.searchBox{
width:100%;
background-color: #e6e6e6;
height: 50px;
margin-top: 0;
box-sizing: border-box;
padding: 10px;
position: relative;
}
.searchBox button{
border: none;
max-width: 12%;
min-height:40px;
background-color: #e6e6e6;
}
.search{
float: left;
}
.settings,.edit,.dots{
float: right;
}
.search img, .settings img, .edit img, .dots img {
width: 100%;
height:100%;
}
.searchBox input[type=search]{
float: left;
height: 30px;
border: none;
background-color: #e6e6e6;
font-size: 16px;
max-width: 50%;
}
.contentBox{
width: 100%;
height: 80vh;
overflow-y: scroll;
}
.box{
display: inline-block;
max-width: 100px;
max-height: 100px;
margin: 5px;
}
.box img{
width: 100%;
}
#popup{
display:none;
width:100%;
height:auto;
}
#popup img{
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>MediaValet</title>
<link rel="stylesheet" type="text/css" href="css/styles3.css" >
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
var x = false;
$('.box').on('click', function(){
if (!x){
$("#popup").show("slow").delay(500);
x = true;
}
else {
$("#popup").hide("slow").delay(500);
x = false;
}
});
});
</script>
</head>
<body>
<div class="medialibrary">
<div class="searchBox">
<button class="search"><img src="images/search-icon.png"></button> <input type="search" placeholder="Search.."></button><button class="dots"><img src="images/dots.png"></button><button class="settings"><img src="images/setting.png"> <button class="edit"><img src="images/edit.png"></button>
</div>
<div class="clear"></div>
<p>Media Library</p>
<div class="contentBox">
<div id="image1" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image2" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image3" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image4" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image5" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image6" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image7" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image8" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image9" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image10" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image11" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image12" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image13" class="box" >
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image14" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image15" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="popup"><img src="http://lorempixel.com/400/200/"></div>
</div>
</div>
</body>
</html>
By making use of each image position top and ``left values we position the popup which has much higher z-index, also on clicking any of these image we take the src value of that image and in inject this value into the #popup img src to load that image into the popup
Updated: now it is "responsive" and the whole set of rows below the popup shift down.
JS: JS Fiddle
var imgs = $('.box img'),
contBox = $('.contentBox'),
popup = $('#popup');
imgs.each(function () {
$(this).on('click', function (evt) {
var $th = $(this),
x = $th.position().left,
y = $th.position().top,
h = this.height,
winW = $(window).width(),
winH = $(window).height(),
src = $th.attr('src'),
a = 0,
last = imgs.last(),
shiftingDown = (winW/winH) * popup.height() - 5 * h,
lastY = last.position().top;
popup.detach();
imgs.each(function (index) {
var thY = $(this).position().top;
if(thY > y){
if(a == 0){
var nextRowFirstItem = $(this).parent();
popup.detach();
popup.children('img').attr('src',src);
popup.css({'display':'block'}).animate({'margin-top' : 0 });
popup.insertBefore(nextRowFirstItem);
$(this).parent().stop().animate({'margin-top' : shiftingDown});
a = 1;
}
}else if( thY == lastY){
popup.detach();
popup.children('img').attr('src',src);
popup.css({'display':'block', 'margin-top':'10px'}).animate({'margin-top' : 0 });
contBox.append(popup);
}else{
imgs.each(function (index) {
$(this).parent().stop().animate({'margin-top' : 0 });
});
}
});
});
});
popup.children('#close').on('click', function (e) {
e.preventDefault();
popup.hide();
imgs.each(function () {
$(this).parent().animate({'margin-top' : "0" });
});
});
Here is what you are expecting. Cheers!
body,html{
margin: 0;
padding: 0;
background-color: #ffffff;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
color: #a6a6a6;
height: 100%;
position: relative;
}
.clear{
clear: both;
}
.searchBox{
width:100%;
background-color: #e6e6e6;
height: 50px;
margin-top: 0;
box-sizing: border-box;
padding: 10px;
position: relative;
}
.searchBox button{
border: none;
max-width: 12%;
min-height:40px;
background-color: #e6e6e6;
}
.search{
float: left;
}
.settings,.edit,.dots{
float: right;
}
.search img, .settings img, .edit img, .dots img {
width: 100%;
height:100%;
}
.searchBox input[type=search]{
float: left;
height: 30px;
border: none;
background-color: #e6e6e6;
font-size: 16px;
max-width: 50%;
}
.contentBox{
width: 100%;
height: 80vh;
overflow-y: scroll;
}
.box{
display: inline-block;
max-width: 100px;
max-height: 100px;
margin: 5px;
}
.box img{
width: 100%;
}
#popup{
display:none;
width:100%;
height: 100%;
position: absolute;
background: rgba(0,0,0,0.7);
top: 50%;
margin-top: -25%;
text-align: center;
}
#popup img{
width: 75%;
height: auto;
margin: -25% auto 0 auto;
position: relative;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = false;
$('.box').on('click', function(){
if (!x){
$("#popup").show("slow").delay(500);
x = true;
}
else {
$("#popup").hide("slow").delay(500);
x = false;
}
});
});
</script>
<div class="medialibrary">
<div class="searchBox">
<button class="search"><img src="images/search-icon.png"></button> <input type="search" placeholder="Search.."></button><button class="dots"><img src="images/dots.png"></button><button class="settings"><img src="images/setting.png"> <button class="edit"><img src="images/edit.png"></button>
</div>
<div class="clear"></div>
<p>Media Library</p>
<div class="contentBox">
<div id="image1" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image2" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image3" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image4" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image5" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image6" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image7" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image8" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image9" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image10" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image11" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image12" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image13" class="box" >
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image14" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image15" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
</div>
</div>
<div id="popup"><img src="http://lorempixel.com/400/200/"></div>
Working jsfiddle