Since last week I've been creating an HTML site, and I've been using mouse hovering to make image move when your cursor hover on a hyperlink, so everything seems fine and I mostly finished it but there is something that I quite don't understand, I've created 3 hyperlink with 3 mouse hovering images, but the last one actually hovers on the whole page of the site.
I have no idea why or where it does that so that is why I'm here to ask you this question. You can take a look at my html:
.college .image {
margin-left: 100px;
margin-top: 475px;
position: absolute
}
.college .imagesecond {
transform: translate(0px, 500px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden;
}
.college:hover>.imagesecond {
transform: translate(0, -200px);
}
.lycee .image {
margin-left: 700px;
margin-top: 500px;
position: absolute
}
.lycee .imagefourth {
transform: translate(0px, 300px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden;
}
.lycee:hover>.imagefourth {
transform: translate(0, -200px);
}
.formations .image {
margin-left: 1250px;
margin-top: 510px;
overflow: hidden;
}
.formations .imagesixth {
transform: translate(0px, 400px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden
}
.formations:hover>.imagesixth {
transform: translate(0, -900px);
}
body {
background: url("http://via.placeholder.com/571x179") 33em 0% fixed no-repeat;
position: fixed;
background-color: rgb(0, 85, 170);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css.css" />
<title> sainte marie </title>
</head>
<body>
<div class="saintemarie">
<a href="college/collegesaintemarie.html">
<div class="college">
<img class="image imagefirst" src="http://via.placeholder.com/196x175" />
<img class="image imagesecond" src="http://via.placeholder.com/320x440" />
</div>
</a>
<a href="lycee/lyceesaintemarie.html">
<div class="lycee">
<img class="image imagethird" src="http://via.placeholder.com/183x140" />
<img class="image imagefourth" src="http://via.placeholder.com/320x440" />
</div>
</a>
<a href="c&formation/c&fsaintemarie.html">
<div class="formations">
<img class="image imagefifth" src="http://via.placeholder.com/172x153" />
<img class="image imagesixth" src="http://via.placeholder.com/320x440" />
</div>
</a>
</div>
</body>
</html>
Do you have any ideas that can help me? Or improve my lines of code that I've made so far? Thank you alot!
You need to use left and top rather than margin-left and margin-top. The margins of the images are causing the a tag to expand in size.
.college .image {
left: 100px;
top: 475px;
position: absolute
}
.college .imagesecond {
transform: translate(0px, 500px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden;
}
.college:hover>.imagesecond {
transform: translate(0, -200px);
}
.lycee .image {
left: 700px;
top: 500px;
position: absolute
}
.lycee .imagefourth {
transform: translate(0px, 300px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden;
}
.lycee:hover>.imagefourth {
transform: translate(0, -200px);
}
.formations .image {
left: 1250px;
top: 510px;
position:absolute;
overflow: hidden;
}
.formations .imagesixth {
transform: translate(0px, 400px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden
}
.formations:hover>.imagesixth {
transform: translate(0, -200px);
}
body {
background: url("http://via.placeholder.com/571x179") 33em 0% fixed no-repeat;
position: fixed;
background-color: rgb(0, 85, 170);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css.css" />
<title> sainte marie </title>
</head>
<body>
<div class="saintemarie">
<a href="college/collegesaintemarie.html">
<div class="college">
<img class="image imagefirst" src="http://via.placeholder.com/196x175" />
<img class="image imagesecond" src="http://via.placeholder.com/320x440" />
</div>
</a>
<a href="lycee/lyceesaintemarie.html">
<div class="lycee">
<img class="image imagethird" src="http://via.placeholder.com/183x140" />
<img class="image imagefourth" src="http://via.placeholder.com/320x440" />
</div>
</a>
<a href="c&formation/c&fsaintemarie.html">
<div class="formations">
<img class="image imagefifth" src="http://via.placeholder.com/172x153" />
<img class="image imagesixth" src="http://via.placeholder.com/320x440" />
</div>
</a>
</div>
</body>
</html>
In the last a you hav closed the opening saintemarie div before closing the a tag see here
<a href="c&formation/c&fsaintemarie.html">
<div class="formations">
<img class="image imagefifth" src="formation.png" />
<img class="image imagesixth" src="pepepls.gif" />
</div>
/* closed before a */ </div>
</a>
Try closing it after the a and see if it gets all right
.college .image {
margin-left: 100px;
margin-top: 475px;
position: absolute
}
.college .imagesecond {
transform: translate(0px, 500px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden;
}
.college:hover>.imagesecond {
transform: translate(0, -200px);
}
.lycee .image {
margin-left: 700px;
margin-top: 500px;
position: absolute
}
.lycee .imagefourth {
transform: translate(0px, 300px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden;
}
.lycee:hover>.imagefourth {
transform: translate(0, -200px);
}
.formations .image {
margin-left: 1250px;
margin-top: 510px;
overflow: hidden;
}
.formations .imagesixth {
transform: translate(0px, 400px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden
}
.formations:hover>.imagesixth {
transform: translate(0, -900px);
}
body {
background: url("http://via.placeholder.com/571x179") 33em 0% fixed no-repeat;
position: fixed;
background-color: rgb(0, 85, 170);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css.css" />
<title> sainte marie </title>
</head>
<body>
<div class="saintemarie">
<a href="college/collegesaintemarie.html">
<div class="college">
<img class="image imagefirst" src="http://via.placeholder.com/196x175" />
<img class="image imagesecond" src="http://via.placeholder.com/320x440" />
</div>
</a>
<a href="lycee/lyceesaintemarie.html">
<div class="lycee">
<img class="image imagethird" src="http://via.placeholder.com/183x140" />
<img class="image imagefourth" src="http://via.placeholder.com/320x440" />
</div>
</a>
<a href="c&formation/c&fsaintemarie.html">
<div class="formations">
<img class="image imagefifth" src="http://via.placeholder.com/172x153" />
<img class="image imagesixth" src="http://via.placeholder.com/320x440" />
</div>
</a>
</div>
</body>
</html>
Related
I'm attempting to centre an image and div layer inside a containing div, but so far I can't get it to move from the left of the column. I've tried a few different ways but just can't get it to move. Even the margin auto trick isn't working, which I suspect is because bootstrap 4 is a flex box now.
HTML:
#user-avatar {
background: #ff4e00;
border-radius: 50%;
width: 250px;
margin-bottom: 25px;
position: relative;
}
#user img {
border-radius: 50%;
width: 250px;
transition: .5s ease;
backface-visibility: hidden;
}
#user-avatar:hover img {
cursor: pointer;
opacity: 0.3;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.middle i {
font-size: 34px;
}
#user-avatar:hover .middle {
opacity: 1;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="user" class="col-12">
<div class="col-12" id="user-avatar">
<img class="mx-auto d-block" src="assets/users/av-lg/liane.png" />
<div class="middle">
<i class="fas fa-camera-alt"></i>
<p>Edit Avatar</p>
</div>
</div>
<p id="username" class="text-center"><span>Howdy </span>Liane</p>
<div id="xp-bar" class="text-left">
<div id="xp"><p><i class="fas fa-stars"></i> XP</p></div>
</div>
<p id="stats" class="text-right">Level 1</p>
</div>
It's the image and the 'underlay' ('middle' div) that I need to be in the center.
Add margin-left: 50% and transform: translateX(-50%) to #user-avatar. check below link.
thank you
http://jsfiddle.net/x1hphsvb/10994/
Add Class on id="user-avatar" to mx-auto
<div class="col-12 mx-auto" id="user-avatar">
<img class="d-block" src="assets/users/av-lg/liane.png" />
<div class="middle">
<i class="fas fa-camera-alt"></i>
<p>Edit Avatar</p>
</div>
</div>
https://jsfiddle.net/lalji1051/v06j8orn/9/
simply add this style - centrd now
#user-avatar {
margin: 0 auto;
}
I am a student and new to coding. I have an image and would like the actors name to appear in center of image as a clickable link to show as a hover effect. This is what I want it to look like!
I tried the code that is listed on the link above but name will not show as link. Here's a screenshot since it's just a file on my computer.
I have included coding for two of the 10 images I will use.
HTML-
<div class="pics-container">
<a href="https://en.wikipedia.org/wiki/Jason_Bateman">
<img src="pics/Jason.jpg" alt="Jason Bateman" class="image" border="2px";>
</a><div class="middle"><div class="name">Jason Bateman</div></div>
<div class="pics-container">
<a href="https://en.wikipedia.org/wiki/Rachel_McAdams">
<img src="pics/Rachel.jpg" alt="Rachel McAdams" class="image" border="2px";>
</a><div class="middle"><div class="name">Rachel McAdams</div></div>
CSS-
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 38%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.pics-container {
position: relative;
display: flex;
width: 50%;
padding: 20px;
}
.pics-container:hover .image {
opacity: 0.3;
}
.pics-container:hover .middle {
opacity: 1;
}
.name {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
This is from me researching and trying to put the codes together. Also, after adding padding the images are now stair-stepped instead of being lined up.
Is this what u want?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.img_hover:hover .image {
opacity: 0.3;
}
.img_hover:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<br><br>
<div class="container">
<div class="row">
<div class="col-sm img_hover">
<img src="your_image" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
<div class="col-sm img_hover">
<img src="your_image" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
<div class="col-sm img_hover">
<img src="your_image" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add anchor tag outside of name like this
<div class="text">John Doe</div>
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
.imageWrapper {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
padding: 0px;
margin: 0px;
}
.imageWrapper img {
display: block;
width: 200px;
height: 200px;
padding: 0px;
margin: 0px;
}
.imageWrapper .cornerLink {
height:100px;
width:200px;
opacity: 0.7;
position: absolute;
bottom: 0px;
left: 0px;
margin: 0;
padding: 0;
color: #ffffff;
background-color: cadetblue;
text-decoration: none;
text-align: center;
transform: translateX(0) translateY(100px) translateZ(0);
transition-duration:0.3s;
transition-property: transform;
}
.imageWrapper:hover .cornerLink {
transform: translateX(0) translateY(0) translateZ(0);
}
a{
color: #ffffff;
text-decoration: none;
text-align: center;
}
<body>
<main>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
</main>
</body>
Add overflow:hidden; to your .imageWrapper class. Here's working code:
.imageWrapper {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
padding: 0px;
margin: 0px;
overflow:hidden;
}
.imageWrapper img {
display: block;
width: 200px;
height: 200px;
padding: 0px;
margin: 0px;
}
.imageWrapper .cornerLink {
height:100px;
width:200px;
opacity: 0.7;
position: absolute;
bottom: 0px;
left: 0px;
margin: 0;
padding: 0;
color: #ffffff;
background-color: cadetblue;
text-decoration: none;
text-align: center;
transform: translateX(0) translateY(100px) translateZ(0);
transition-duration:0.3s;
transition-property: transform;
}
.imageWrapper:hover .cornerLink {
transform: translateX(0) translateY(0) translateZ(0);
}
a{
color: #ffffff;
text-decoration: none;
text-align: center;
}
<body>
<main>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
</main>
</body>
Change this line transform: translateX(0) translateY(100px) translateZ(0); to transform: translateX(0) translateY(115px) translateZ(0);:
Add overflow:hidden to .imageWrapper to remove the space under images
.imageWrapper {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
padding: 0px;
margin: 0px;
overflow: hidden; /* Hides links when off image */
}
.imageWrapper img {
display: block;
width: 200px;
height: 200px;
padding: 0px;
margin: 0px;
}
.imageWrapper .cornerLink {
height: 100px;
width: 200px;
opacity: 0.7;
position: absolute;
bottom: 0px;
left: 0px;
margin: 0;
padding: 0;
color: #ffffff;
background-color: cadetblue;
text-decoration: none;
text-align: center;
transform: translateX(0) translateY(100px) translateZ(0);
transition-duration: 0.3s;
transition-property: transform;
}
.imageWrapper:hover .cornerLink {
transform: translateX(0) translateY(0) translateZ(0);
}
a {
color: #ffffff;
text-decoration: none;
text-align: center;
}
<body>
<main>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
</main>
</body>
Arrow(custom icon) I am trying to animate
I've created an icon image of an arrow that is also a link. It is on top of a background image. When the mouse hovers over the arrow I'd like to create a "sink" effect similar to the one found in the 2d transitions section here. How can this be done?
My CSS/HTML thus far:
body {
padding: 0;
margin: 0;
}
header {
height: 100vh;
}
.content {
height: 150vh;
}
img#bg {
z-index: -100;
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: 100%;
/* Set up positioning */
position: relative;
top: 0;
left: 0;
}
img#arrow {
position: absolute;
bottom: 50;
left: 45.5%;
}
h1#title {
font-size: 20px;
font-family: arial;
margin-top: 2.5em;
text-align: center;
color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Tinker Time</title>
</head>
<body>
<header>
<img src="assets/building2.jpg" id="bg" alt="" />
<a href="#anchor">
<img src="assets/arrow.png" id="arrow" alt="" />
</a>
</header>
<div class="content">
<a name="anchor"></a>
<h1>Team Members, About us, Blog</h1>
</div>
</body>
The hover code that's part of this lib should still work with an image, heres a working example with a random avatar icon:
/* Sink */
.hvr-sink {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active {
-webkit-transform: translateY(8px);
transform: translateY(8px);
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img class="hvr-sink" src="https://www.gravatar.com/avatar/6fce102dc34236cd4e485c69d7293ee9?s=32&d=identicon&r=PG"></img>
<br>
</body>
</html>
This should do the job if you are using the hover.css.
Just import the hover.css stylesheet into your HTML
<link rel="stylesheet" type="text/css" href="css/hover.css">
and add this:
<img src="assets/arrow.png" id="arrow" alt="" class="hvr-sink" />
Have a look at this, very simple version - could be an image if you want.
If that's all you want then don't need to include a singing and dancing library!
.red_box {
display: block;
width: 100px;
height: 100px;
background: red;
transition: all 0.5s ease;
}
.red_box:hover {
transform: translateY(16px);
}
<div class="red_box"></div>
Simple:
Add hover.css to your html file,
Add hvr-sink class to your arrow image.
For example:
<body>
<header>
<img src="assets/building2.png" id="bg" alt="" />
<a href="#anchor">
<img src="assets/arrow.png" class="hvr-sink" id="arrow" alt="" />
</a>
</header>
<div class="content">
<a name="anchor"></a>
<h1>Team Members, About us, Blog</h1>
</div>
</body>
I'm using this layout and as you can see there is a section with 8 pictures on the bottom of the page - each of them is a hyperlink to the bigger image. It works pretty neat, esp. when you resize the page to smaller size, then the 4 cells becomes 2 and it looks like this. I want to change it a little, so that two first pictures are merged together, so the layout could look like this, and when the user resizes it, it would show him a proper layout like this. So far the html code for that specific part of the page looks like this:
<section class="screenshots" id="screenshots">
<div class="container-fluid">
<div class="row">
<ul class="grid">
<li>
<figure>
<img src="img/02-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/02.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>User Centric Design</p>
</a>
</div>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/03-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/03.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>Responsive and Adaptive</p>
</a>
</div>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/04-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/04.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>Absolutely Free</p>
</a>
</div>
</figcaption>
</figure>
</li>
</ul>
</div>
<div class="row">
<ul class="grid">
<li>
<figure>
<img src="img/06-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/06.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>Exclusive to Codrops</p>
</a>
</div>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/07-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/07.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>Made with Love</p>
</a>
</div>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/08-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/08.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>In Sydney, Australia</p>
</a>
</div>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</section>
and the css code looks like this:
/* ==========================================================================
Screenshots Intro
========================================================================== */
.screenshots-intro {
padding: 170px 0 100px 0;
background-color: #f6f7f9;
}
.screenshots-intro h1 {
margin-bottom: 20px;
color: #24374b;
font-weight: 400;
font-size: 22px;
}
.screenshots-intro p {
margin-bottom: 25px;
color: #778899;
}
/* ==========================================================================
Screenshots
========================================================================== */
.screenshots ul {
margin: 0;
padding: 0;
width: 100%;
}
.screenshots ul li {
float: left;
min-height: 100%;
width: 25%;
background-color: #000;
list-style: none;
}
.screenshots figure {
position: relative;
overflow: hidden;
}
.screenshots figure img {
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.screenshots figure:hover img, .screenshots figure:focus img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.screenshots figcaption {
position: absolute;
top: 0;
left: 0;
padding: 25% 0;
width: 100%;
height: 100%;
background-color: rgba(63, 97, 132, 0.85);
text-align: center;
font-size: 15px;
opacity: 0;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.screenshots figcaption a {
color: #fff
}
.screenshots figcaption a:hover, .screenshots figcaption a:focus {
color: #73d0da
}
.screenshots figure:hover figcaption, .screenshots figure:focus figcaption {
opacity: 1
}
.visible {
opacity: 1
}
.screenshots figure.cs-hover figcaption {
opacity: 1
}
.screenshots figcaption i {
font-size: 35px
}
.screenshots figcaption p {
margin-bottom: 0;
text-transform: uppercase;
font-weight: 400;
}
.screenshots figcaption .caption-content {
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -100px;
width: 200px;
-webkit-transform: translate(0px, 15px);
-ms-transform: translate(0px, 15px);
transform: translate(0px, 15px);
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.screenshots figure:hover figcaption .caption-content, .screenshots figure:focus figcaption .caption-content {
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
I know it's a lot of code, but maybe anyone of you have the idea of how to change this particular part of the layout to have it as I included in the pictures? Thanks.
This is the updated answer.
I am attaching the code and jsfiddle link with it.
Just replace the src of the images with yours to see the results.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.container {
width: 100%;
margin: 0 auto;
}
img {
max-width: 100%;
}
/* this css is just for understanding */
.a {
background-color: red;
}
.b {
background-color: green;
}
.c {
background-color: blue;
}
.d {
background-color: black;
}
/* this css is just for understanding */
/* this is the logic to change the positions of image */
#media (min-width: 320px) {
.a,
.b,
.c,
.d {
width: 100%;
float: left;
}
}
#media (min-width: 768px) {
.a,
.b,
.c,
.d {
width: 50%;
float: left;
}
}
</style>
<body>
<div class="container">
<div class="a">
<img src="img/1.png" height="222" width="581">
</div>
<div class="b">
<img src="img/2.jpg" height="222" width="581">
</div>
<div class="c">
<img src="img/3.jpg" height="222" width="581">
</div>
<div class="d">
<img src="img/4.png" height="222" width="581">
</div>
</div>
</body>
</html>
this is the jsfiddle link