On mouse hover, animated span tags beneath an img work fine when the img isn't using object-fit: contain like below:
body {
height: 100%;
width: 100%;
margin: 0
}
.container {
max-width: 600px;
position: relative;
text-align: center;
width: 100%;
}
.product {
position: relative;
width: 150px;
}
img.content {
background: white;
height: auto;
margin: 8%;
position: relative;
width: 84%;
vertical-align: middle;
z-index: 5000;
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: block;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: none;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
}
#keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}
<body>
<div class="container">
<p>Hover image please</p>
<div class="product">
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
<span class="effect-1"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<span class="effect-2"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
</div>
</div>
</body>
But when the img is using object-fit: contain the animated spans take up the entire area:
body {
height: 100%;
margin: 0;
}
.container {
max-width: 600px;
position: relative;
text-align: center;
width: 100%;
height: 100%;
min-height: 700px;
}
.product {
height: 100%;
position: absolute;
}
.content {
background: white;
margin: 8%;
position: relative;
width: 84%;
height: 100%;
vertical-align: middle;
z-index: 5000;
object-fit: contain;
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: block;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: none;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
}
#keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}
<body>
<div class="container">
<div class="product">
<span class="effect-1"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<span class="effect-2"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
</div>
</div>
</body>
How do you make these hover effects apply only to the area around the image (not the entire area) when using object-fit: contain? The image must remain vertically centered using object-fit.
Is this what you wanted? The image is centered between the animated divs.
The reason why your image is larger in the second example you've given is because you've changed your CSS there. You've changed the height/width values of .container, .product etc, so the children elements are showing up larger, because they inherit these values.
I've changed max-width and min-height in .container to reduce the overall size. And the width of .content should be less than the width of the effect divs
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
max-width: 300px;
/* This is new */
position: relative;
text-align: center;
width: 100%;
height: 100%;
min-height: 300px;
/* This is new */
}
.product {
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
}
.content {
display: flex;
align-self: center;
background: white;
margin: 0 auto;
position: relative;
width: 65%;
/* This is new */
object-fit: contain;
/* This is new */
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: flex;
}
.effects {
position: absolute;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: flex;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
visibility: visible;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
object-fit: contain;
display: flex;
margin: 0 auto;
align-self: center;
position: relative;
}
#keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}
<body>
<div class="container">
<div class="product">
<span class="effects">
<img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
<span class="effect-1"></span>
<span class="effect-2"></span>
</span>
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
</div>
</div>
</body>
Related
So I want to create this animation where basically this happens:
When you hover on an icon, it gets bigger, increases in opacity, and some text appears.
In addition to this, 2 lines of color extend in width from the center out to the sides, then they increase in height.
The bottom color should expand downwards, while the top color should expand upwards.
I created this test-base and was wondering how I would go about making this from here. I tried tweaking the height, width, and opacity but those also edit the icon, so I'm wondering if I'm taking the wrong approach or just doing it wrong. Any help and/or pointers are appreciated.
Current code:
* {
margin: 0;
padding: 0;
font-family: "Consolas";
}
body {
background: #212121;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.hoverCard {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 320px;
height: 480px;
border-radius: 30px;
background: #191919;
overflow: hidden;
}
.hoverCard::before {
background: blue;
content: "";
position: absolute;
width: 100%;
height: 50%;
transition: 0.5s;
}
.hoverCard .mainImg {
opacity: 0.25;
height: 160px;
width: 160px;
transition: 0.5s;
margin: 10;
margin-top: 50%;
}
.hoverCard .mainText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.hoverCard .subText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.mainImg:hover {
transform: scale(1.5);
opacity: 1;
margin-top: 30%;
}
.mainImg:hover~.mainText {
margin-top: 20%;
opacity: 1;
}
.mainImg:hover~.subText {
margin-top: 25%;
opacity: 1;
}
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="hoverCard">
<img class="mainImg" src="../Media/Link-Logos/Discord.png">
<p class="mainText">Discord</p>
<p class="subText">Ex0tic_Python#7571</p>
</div>
</body>
</html>
As the requirement is to have lines drawn and expanding when the image is hovered, and the image itself cannot have pseudo elements, this snippet adds a further element after the img, .lines.
This is positioned absolutely and sized relative to the overall card (parent) element.
It has before and after pseudo elements which draw lines and then expand vertically using a CSS animation.
As I was unclear what you wanted to happen about the line going downwards (if it keeps the same background color as the card then of course it can't be seen) so this snippet makes it pink.
Of course you will want to alter timings and perhaps dimensions to suit your specific requirements, this is just a simple example to demonstrate one possibility.
<html>
<head>
<link rel="stylesheet" href="main.css">
<style>
* {
margin: 0;
padding: 0;
font-family: "Consolas";
}
body {
background: #212121;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.hoverCard {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 320px;
height: 480px;
border-radius: 30px;
overflow: hidden;
}
.hoverCard .mainImg {
opacity: 0.25;
height: 160px;
width: 160px;
transition: 0.5s;
margin: 10;
margin-top: 50%;
}
.hoverCard .mainText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.hoverCard .subText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.mainImg:hover {
transform: scale(1.5);
opacity: 1;
margin-top: 30%;
}
.mainImg:hover~.mainText {
margin-top: 20%;
opacity: 1;
}
.mainImg:hover~.subText {
margin-top: 25%;
opacity: 1;
}
.lines {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
display: flex;
justify-content: center;
background-color: #191919;
}
.lines::before,
.lines::after {
content: '';
margin: 0 auto;
position: absolute;
width: 160px;
height: 10px;
opacity: 0;
}
.lines::before {
background-color: blue;
bottom: 50%;
}
.lines::after {
background-color: pink;
top: 50%;
}
#keyframes expand {
0% {
opacity: 0;
width: 160px;
height: 10px;
}
9.99% {
opacity: 0;
}
10% {
width: 240px;
opacity: 1;
}
50% {
width: 100%;
height: 10px;
}
100% {
opacity: 1;
width: 100%;
height: 100%;
}
}
.mainImg:hover~.lines::before,
.mainImg:hover~.lines::after {
display: block;
animation: expand 3s linear forwards 0.3s;
}
</style>
</head>
<body>
<div class="hoverCard">
<img class="mainImg" src="https://picsum.photos/id/1015/200/200">
<div class="lines"></div>
<p class="mainText">Discord</p>
<p class="subText">Ex0tic_Python#7571</p>
</div>
</body>
</html>
I have a animated div that flies to the top right corner of the viewport.
However, because of the overflow properties it not visible outside of parent container in Firefox. It is perfectly visible in Chrome.
Element behind the scrollbar in Firefox:
Element correctly above the parent in Chrome:
How can I make it work in Firefox as well? If overflow-y: auto is removed from .container the issue doesn't appear anymore, but that's not a viable solution as I need the scrollable content.
Here is an example. You can check that it produces the desired behaviour in Chrome, but not in Firefox:
.app {
overflow: hidden;
}
.container {
width: 260px;
max-height: 400px;
background: blue;
left: 10px;
right: 10px;
top: 10px;
position: fixed;
z-index: 500;
overflow-y: auto;
}
.wrapper {
height: 250px;
padding: 10px;
margin: 5px;
background: yellow;
top: 5px;
position: sticky;
}
.content {
height: 600px;
margin: 5px;
background: orange;
}
#keyframes fly-to-top {
10% {
top: 150px;
right: 80%;
width: 50px;
}
30% {
top: 120px;
right: 70%;
width: 45px;
}
60% {
top: 75px;
right: 40%;
width: 40px;
}
100% {
top: 10px;
right: 160px;
width: 35px;
}
}
.animated {
position: fixed;
right: unset;
top: 165px;
width: 50px;
background: red;
color: white;
animation: fly-to-top linear 2s forwards;
display: flex;
align-items: flex-start;
}
<div class="app">
<div class="container">
<div class="wrapper">
<div class="animated">
Text
</div>
</div>
<div class="content">
Lorem ipsum
</div>
</div>
</div>
Try this splution:
.wrapper position set to fixed
.content is shifted down with transform: translateY()
In the .wrapper class, i was add pointer-events: none;, because
if cursor is on the .wrapper block without this property, mouse
wheel cann't scroll the content, scroll work only when drag the
scroll bar.
.app {
overflow: hidden;
}
.container {
width: 260px;
max-height: 400px;
background: blue;
left: 10px;
right: 10px;
top: 10px;
position: fixed;
z-index: 500;
overflow-y: auto;
}
.wrapper {
display: flex;
height: 250px;
padding: 10px;
margin: 5px;
background: yellow;
/* top: 5px; */
position: fixed; /* changed */
/* calculate '.container' width - scroll-track-width(12px-17px) - '.wrapper' padding(left, right) - margin(left, right) */
width: calc(260px - 12px - 20px - 10px);
z-index: 5;
pointer-events: none; /* mouse wheel work with this property */
}
.content {
height: 600px;
margin: 5px;
background: orange;
/* calculate '.wrapper' properties to shift '.content' down */
/* height + padding(top, bottom) + margin-bottom */
transform: translateY(calc(250px + 20px + 5px));
}
#keyframes fly-to-top {
10% {
top: 150px;
right: 80%;
width: 50px;
}
30% {
top: 120px;
right: 70%;
width: 45px;
}
60% {
top: 75px;
right: 40%;
width: 40px;
}
100% {
top: 10px;
right: 160px;
width: 35px;
}
}
.animated {
position: fixed;
right: unset;
top: 165px;
width: 50px;
background: red;
color: white;
animation: fly-to-top linear 2s forwards;
display: flex;
align-items: flex-start;
z-index: 100;
}
<div class="app">
<div class="container">
<div class="wrapper">
<div class="animated">
Text
</div>
</div>
<div class="content">
Lorem ipsum
</div>
</div>
</div>
Edited after comment:
You can take the animated element out of its parent (i.e. the element which has overflow: hidden), on a higher level in the HTML code - as a sibling to the container. I did that in the snippet below, and also added a z-index that places the animated element above the container:
.app {
overflow: hidden;
}
.container {
width: 260px;
max-height: 400px;
background: blue;
left: 10px;
right: 10px;
top: 10px;
position: fixed;
z-index: 500;
overflow-y: auto;
}
.wrapper {
height: 250px;
padding: 10px;
margin: 5px;
background: yellow;
top: 5px;
position: sticky;
}
.content {
height: 600px;
margin: 5px;
background: orange;
}
#keyframes fly-to-top {
10% {
top: 150px;
right: 80%;
width: 50px;
}
30% {
top: 120px;
right: 70%;
width: 45px;
}
60% {
top: 75px;
right: 40%;
width: 40px;
}
100% {
top: 10px;
right: 160px;
width: 35px;
}
}
.animated {
position: fixed;
right: unset;
top: 165px;
width: 50px;
background: red;
color: white;
animation: fly-to-top linear 2s forwards;
display: flex;
align-items: flex-start;
z-index: 501;
}
<div class="app">
<div class="container">
<div class="wrapper">
</div>
<div class="content">
Lorem ipsum
</div>
</div>
<div class="animated">
Text
</div>
</div>
I'd like to be able to have the div shine-box go across the image automatically from the top left ever like 3 seconds, left to right, left to right etc.
This is the current code:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: darkblue;
}
img {
border: 0;
}
.shine-box {
position: absolute;
width: 200px height: 200px;
overflow: hidden;
border-radius: 40%;
}
.shine-box:before {
position: absolute;
top: 0;
left: -500px;
content: "";
width: 120px;
height: 500px;
background: rgba(255, 255, 255, 0.6);
transform: skew(-50deg);
transition: 1s;
}
.shine-box:hover:before {
left: 655px;
}
<div class="shine-box">
<img class="neko" src="neko-fin.png" alt="neko.png">
</div>
Is this something you are looking for. As #Pete suggested you have to use CSS animation instead of transition
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: darkblue;
}
img {
border: 0;
width: 100%;
}
.shine-box {
position: absolute;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 40%;
}
.shine-box:before {
position: absolute;
top: 0;
left: -500px;
content: "";
width: 120px;
height: 500px;
background: rgba(255, 255, 255, 0.6);
transform: skew(-50deg);
/* transition: 1s; */
animation: shine 3s ease infinite;
}
#keyframes shine {
from {left: -500px;}
to {left: 655px;}
}
/* .shine-box:hover:before {
left: 655px;
} */
<div class="shine-box">
<img class="neko" src="data:image/jpeg;base64,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" alt="neko.png">
</div>
I can't get the rollover image (e.g. .rolled-thumb-1) to stay displayed after rolling off the image thumbs. It should work using the transition delay property exactly like in this demo, but doesn't. Rolling over the thumbs creates an absolutely positioned div rather than replace the initial large image's background image.
The selector that should do it is:
.rolled {
transition: background-image .1s 604800s;
background-size: cover;
/* background-image: url('https://cml.sad.ukrd.com/tp/3x2/'); - transparent img */
}
And hovering over, for example, the first thumb:
#thumb-1:hover .rolled-thumb-1 {
background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
I noticed many other similar posts mention reordering the transition and transition-delay rules, which I've done but to no avail. If I uncomment the transparent as above, only 1 of the images work, but then doesn't change back and only 1 works. I think it's something to do with having nothing to transition in the first place, as it somewhat transitioned when the BG image was there, though not properly.
Does anyone have any ideas? An explanation of what I'm doing wrong would be very helpful. Thanks for any help
/* images */
#main-image { background-image: url('https://cml.sad.ukrd.com/image/661835.jpg') }
#thumb-1 { background-image: url('https://cml.sad.ukrd.com/image/394545.jpg') }
#thumb-2 { background-image: url('https://cml.sad.ukrd.com/image/572806.jpg') }
#thumb-3 { background-image: url('https://cml.sad.ukrd.com/image/486757.jpg') }
#thumb-4 { background-image: url('https://cml.sad.ukrd.com/image/612357.jpg') }
/* images */
* {
margin: 0;
padding: 0;
font-family: arial;
line-height: 1.5em;
box-sizing: border-box;
}
#images-and-hook-container {
width: 100%;
height: auto;
float: left;
background: cyan;
display: flex; /* allows hook container to be full height */overflow: hidden;
position:relative;
}
#hook-container {
background: blue;
float: left;
width: 33%;
height: auto;
padding: 3% 0 0 3%;
position: absolute;
height: 100%;
right: 0;
top: 0;
}
#hook-container > span {
font-weight: bold;
font-size: 1.5em;
}
#hook-container > ul {
list-style-type: none;
font-size: 1em;
}
#hook-container ul li:before {
content: '✓ ';
color: green;
}
#images-wrap {
width: 67%;
height: auto;
float: left;
position: relative;
}
#main-image {
width: 79%;
float: left;/*
background-size: cover !important;
background-position: center center !important;*/
height: auto;
width: 100%;
padding-bottom: 52.666%;
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
position: relative;
}
#image-thumbs {
width: 19%;
float: left;
margin-left: 2%;
position: absolute;
right: 0;
height: 100%;
overflow-x: visible !important;
overflow-y: visible !important;
}
.image-thumb {
margin-bottom: 4%;
background-position: center center;
background-size: cover;
width: 100%;
height: auto;
padding-bottom: 66.666%;
}
.image-thumb:last-of-type { margin-bottom: 0 }
.image-thumb:hover { cursor: pointer }
#media (max-width: 768px) {
body { background: red }
#images-and-hook-container {
flex-direction: column;
}
#images-wrap {
position: static;
width: 100%;
}
#hook-container {
width: 100%;
padding: 3% 0;
position: static;
}
#main-image {
width: 100%;
padding-bottom: 66.666%;
padding-bottom: 84.333%; /* 125*2/3 (+1 for margin bottom) */
}
#image-thumbs {
width: 100%;
margin-left: 0;
top: 0;
left: 0;
display: flex;
flex-wrap: nowrap;
overflow-x: visible !important;
overflow-y: visible !important;
}
.image-thumb {
float: left;
margin-bottom: 6px;
width: 24.333%;
padding-bottom: 16.666%;
flex: 1 0 24.333%;
margin-left: 1%;
}
.image-thumb:first-of-type { margin-left: 0 }
#aspect-ratio-wrap {
float: left;
width: 100%;
height: auto;
padding-bottom: 16.666%;
background: orange;
position: absolute;
bottom: 0;
overflow-x: visible !important;
overflow-y: visible !important;
}
#main-image-area {
position: absolute;
left: 0;
top: 0;
background: transparent;
width: 100%;
height: 79%;
z-index: 99;
}
}
#thumb-1, #thumb-2, #thumb-3, #thumb-4 {position:relative}
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 {
position: absolute;
background: pink;
width: 411%;
height: 400%;
top: -406%;
z-index: 9;
}
.rolled-thumb-2 {left:-104%}
.rolled-thumb-3 {left:-208%}
.rolled-thumb-4 {left:-312%}
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 { background-color: transparent }
.rolled {
transition: background-image .1s 604800s;
background-size: cover;
/* background-image: url('https://cml.sad.ukrd.com/tp/3x2/'); */
}
#thumb-1:hover .rolled-thumb-1 {
background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#thumb-2:hover .rolled-thumb-2 {
background-image: url('https://cml.sad.ukrd.com/image/572806.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#thumb-3:hover .rolled-thumb-3 {
background-image: url('https://cml.sad.ukrd.com/image/486757.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#thumb-4:hover .rolled-thumb-4 {
background-image: url('https://cml.sad.ukrd.com/image/612357.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#media (min-width: 768px) {
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 {
width: 414.5%;
height: 416%;
top: 0;
left: -425%;
}
.rolled-thumb-2 { top: -106% }
.rolled-thumb-3 { top: -212% }
.rolled-thumb-4 { top: -318% }
#main-image-area {
position: absolute;
left: 0;
top: 0;
background: transparent;
width: 79%;
height: 100%;
z-index: 99;
}
}
<div id='images-and-hook-container'>
<div id="images-wrap">
<div id="main-image"><div id='main-image-area'></div>
<div id='aspect-ratio-wrap'>
<div id="image-thumbs">
<div class="image-thumb" id="thumb-1"><div class='rolled rolled-thumb-1'></div></div>
<div class="image-thumb" id="thumb-2"><div class='rolled rolled-thumb-2'></div></div>
<div class="image-thumb" id="thumb-3"><div class='rolled rolled-thumb-3'></div></div>
<div class="image-thumb" id="thumb-4"><div class='rolled rolled-thumb-4'></div></div>
</div>
</div>
</div>
</div>
<div id='hook-container'>
<span>Summary</span>
<ul>
<li>key selling point</li>
<li>key selling point</li>
<li>key selling point</li>
</ul>
</div>
</div>
UPDATE
This is similar to one of my other posts, but different as the solution to the other post does not apply to this post. Not trying to spam and genuinely don't know how to solve this.
/* images */
#main-image { background-image: url('https://cml.sad.ukrd.com/image/661835.jpg') }
#thumb-1 { background-image: url('https://cml.sad.ukrd.com/image/394545.jpg') }
#thumb-2 { background-image: url('https://cml.sad.ukrd.com/image/572806.jpg') }
#thumb-3 { background-image: url('https://cml.sad.ukrd.com/image/486757.jpg') }
#thumb-4 { background-image: url('https://cml.sad.ukrd.com/image/612357.jpg') }
/* images */
* {
margin: 0;
padding: 0;
font-family: arial;
line-height: 1.5em;
box-sizing: border-box;
}
#images-and-hook-container {
width: 100%;
height: auto;
float: left;
background: cyan;
display: flex; /* allows hook container to be full height */overflow: hidden;
position:relative;
}
#hook-container {
background: blue;
float: left;
width: 33%;
height: auto;
padding: 3% 0 0 3%;
position: absolute;
height: 100%;
right: 0;
top: 0;
}
#hook-container > span {
font-weight: bold;
font-size: 1.5em;
}
#hook-container > ul {
list-style-type: none;
font-size: 1em;
}
#hook-container ul li:before {
content: '✓ ';
color: green;
}
#images-wrap {
width: 67%;
height: auto;
float: left;
position: relative;
}
#main-image {
width: 79%;
float: left;/*
background-size: cover !important;
background-position: center center !important;*/
height: auto;
width: 100%;
padding-bottom: 52.666%;
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
position: relative;
}
#image-thumbs {
width: 19%;
float: left;
margin-left: 2%;
position: absolute;
right: 0;
height: 100%;
overflow-x: visible !important;
overflow-y: visible !important;
}
.image-thumb {
margin-bottom: 4%;
background-position: center center;
background-size: cover;
width: 100%;
height: auto;
padding-bottom: 66.666%;
}
.image-thumb:last-of-type { margin-bottom: 0 }
.image-thumb:hover { cursor: pointer }
#media (max-width: 768px) {
body { background: red }
#images-and-hook-container {
flex-direction: column;
}
#images-wrap {
position: static;
width: 100%;
}
#hook-container {
width: 100%;
padding: 3% 0;
position: static;
}
#main-image {
width: 100%;
padding-bottom: 66.666%;
padding-bottom: 84.333%; /* 125*2/3 (+1 for margin bottom) */
}
#image-thumbs {
width: 100%;
margin-left: 0;
top: 0;
left: 0;
display: flex;
flex-wrap: nowrap;
overflow-x: visible !important;
overflow-y: visible !important;
}
.image-thumb {
float: left;
margin-bottom: 6px;
width: 24.333%;
padding-bottom: 16.666%;
flex: 1 0 24.333%;
margin-left: 1%;
}
.image-thumb:first-of-type { margin-left: 0 }
#aspect-ratio-wrap {
float: left;
width: 100%;
height: auto;
padding-bottom: 16.666%;
background: orange;
position: absolute;
bottom: 0;
overflow-x: visible !important;
overflow-y: visible !important;
}
#main-image-area {
position: absolute;
left: 0;
top: 0;
background: transparent;
width: 100%;
height: 79%;
z-index: 99;
}
}
#thumb-1, #thumb-2, #thumb-3, #thumb-4 {position:relative}
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 {
position: absolute;
background: pink;
width: 411%;
height: 400%;
top: -406%;
z-index: 9;
opacity: 0;
transition: opacity 1s 3s ease;
background-color: transparent;
}
.rolled-thumb-2 {left:-104%}
.rolled-thumb-3 {left:-208%}
.rolled-thumb-4 {left:-312%}
.rolled {
background-size: cover;
/* background-image: url('https://cml.sad.ukrd.com/tp/3x2/'); */
}
#thumb-1:hover .rolled-thumb-1 {
opacity: 1;
transition: opacity 1s 0s ease;
}
#thumb-2:hover .rolled-thumb-2 {
opacity: 1;
transition: opacity 1s 0s ease;
}
#thumb-3:hover .rolled-thumb-3 {
opacity: 1;
transition: opacity 1s 0s ease;
}
#thumb-4:hover .rolled-thumb-4 {
opacity: 1;
transition: opacity 1s 0s ease;
}
.rolled-thumb-1 {
background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
}
.rolled-thumb-2 {
background-image: url('https://cml.sad.ukrd.com/image/572806.jpg');
}
.rolled-thumb-3 {
background-image: url('https://cml.sad.ukrd.com/image/486757.jpg');
}
.rolled-thumb-4 {
background-image: url('https://cml.sad.ukrd.com/image/612357.jpg');
}
#media (min-width: 768px) {
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 {
width: 414.5%;
height: 416%;
top: 0;
left: -425%;
}
.rolled-thumb-2 { top: -106% }
.rolled-thumb-3 { top: -212% }
.rolled-thumb-4 { top: -318% }
#main-image-area {
position: absolute;
left: 0;
top: 0;
background: transparent;
width: 79%;
height: 100%;
z-index: 99;
}
}
<div id='images-and-hook-container'>
<div id="images-wrap">
<div id="main-image"><div id='main-image-area'></div>
<div id='aspect-ratio-wrap'>
<div id="image-thumbs">
<div class="image-thumb" id="thumb-1"><div class='rolled rolled-thumb-1'></div></div>
<div class="image-thumb" id="thumb-2"><div class='rolled rolled-thumb-2'></div></div>
<div class="image-thumb" id="thumb-3"><div class='rolled rolled-thumb-3'></div></div>
<div class="image-thumb" id="thumb-4"><div class='rolled rolled-thumb-4'></div></div>
</div>
</div>
</div>
</div>
<div id='hook-container'>
<span>Summary</span>
<ul>
<li>key selling point</li>
<li>key selling point</li>
<li>key selling point</li>
</ul>
</div>
</div>
I am trying to figure out how to place the logo in the middle of the two sections of my landing page but only on the mobile view. The text class is for my logo. I cant seem to figure out the best way to do so.
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
Here is the codepen: http://codepen.io/anon/pen/xqQPVN?editors=1100
Just give it position:absolute and set it accordingly for mobile devies..
Added the following css in the case of mobile.
/* Logo In Center For Mobile Device*/
.logo-big {
display: block;
width: 100%;
position: absolute;
top: 500px;
margin-top: -75px;
}
Codepen link-http://codepen.io/sahildhir_1/pen/wJQxQy?editors=1100
Below is the snippet-
* {
box-sizing: border-box;
}
html,
body {
height: 100%
}
img {
max-width: 100%;
}
.item {
width: 50%;
float: left;
top: 0;
left: 0;
height: 100%;
z-index: 0;
overflow: hidden;
background-color: #000000;
background-position: center center;
background-size: auto 100%;
position: relative;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
transition: .2s linear;
}
.nurseryarea {
width: 100%;
position: absolute;
text-align: center;
top: 45%;
color: #fff;
font-size: 30px;
font-family: 'times new roman';
font-weight: bold;
transition: .2s linear;
}
::selection {
color: #ebebe3;
background: #222;
}
::-moz-selection {
color: #ebebe3;
background: #222;
}
.overlay:hover {
background-color: rgba(0, 0, 0, 0.1);
transition-property: background-color;
}
.overlay:hover .nurseryarea {
opacity: 1;
transition-property: opacity;
}
.logo-big {
display: block;
width: 100%;
}
.logo-big .svg {
display: block;
width: 100%;
height: auto;
}
.imgsize {
width: 40%;
}
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
#media screen and (max-width:600px) {
.nurseryarea {
width: 100%;
}
.imgsize {
width: 60%;
}
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
/* Logo In Center For Mobile Device*/
.logo-big {
display: block;
width: 100%;
position: absolute;
top: 500px;
margin-top: -75px;
}
.logo-big .svg {
display: block;
width: 100%;
height: auto;
}
.item {
width: 100%;
float: left;
top: 0;
left: 0;
height: 500px;
z-index: 0;
overflow: hidden;
background-color: #000000;
background-position: center center;
background-size: auto 100%;
}
}
<div class="text">
<a class="logo logo-big" href="http://www.lygonstnursery.com">
<img class="svg " src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/NURSERY-landing-page.png" alt="Lygon Street Nursery">
</a>
</div>
<div class="item" style="background-image: url(https://www.lygonstnursery.com/wp-content/uploads/2017/02/LygonStNursery_Nursery-29.jpg);background-size:cover;">
<div class="overlay">
<div class="nurseryarea">
<img class='imgsize' src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/nursery.png" ;>
</div>
</div>
</div>
<div class="item" style="background-image: url(https://www.lygonstnursery.com/wp-content/uploads/2017/02/LygonStNursery_Brunswick-24.jpg); background-size:cover;">
<div class="overlay">
<div class="nurseryarea">
<img class="imgsize" src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/landscapes.png" ;>
</div>
</div>
</div>
If you want to have total control over the positioning i'd say go for progressively specific media queries (say: 425px, 375px, 320px) and use pixel positioning.
If you want to keep it generic, you must be prepared to have some small differences between these sizes, but you can use percentages and the result isn't so bad.
#media (max-width: 425px) {
.text {
position: absolute;
right: 34%;
left: 32%;
top: 34%;
}
}