Basically, I have created this rotating border and slideshow. I would like the rotating border to go around the slideshow, however, I have not figured out a way on completing this task. I have tried moving the div's from the border to the slideshow code, but the border gets all messed up. How can I implement my border so it goes around the slideshow? Thanks. Here is my code.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
*, *::before, *::after {
box-sizing: border-box;
}
/* Border */
#keyframes rotate {
100% {
transform: rotate(1turn);
}
}
.rainbow {
position: relative;
z-index: 0;
width: 400px;
height: 300px;
border-radius: 10px;
overflow: hidden;
padding: 2rem;
}
.rainbow::before {
content: '';
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: #399953;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
animation: rotate 4s linear infinite;
}
.rainbow::after {
content: '';
position: absolute;
z-index: -1;
left: 6px;
top: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
background: white;
border-radius: 5px;
}
/* Slideshow */
.slidershow {
width: 700px;
height: 400px;
overflow: hidden;
}
.middle {
position: relative;
top: 200px;
left: 50%;
transform: translate(-50%, -50%);
}
.navigation {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar {
width: 50px;
height: 10px;
border: 2px solid #3F69CA;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover {
background: #3F69CA;
}
input[name="r"] {
position: absolute;
visibility: hidden;
}
.slides {
width: 500%;
height: 100%;
display: flex;
}
.slidess {
width: 20%;
transition: 0.6s;
}
.slidess>h2 {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
text-align: center;
padding: 15px;
background: rgba(255, 255, 255, .6);
color: rgb(24, 23, 23);
font-size: 18px;
border-radius: 5px;
visibility: hidden;
opacity: 0;
transition: all .5s ease;
z-index: 2;
}
.slides .slidess:hover>h2 {
visibility: visible;
opacity: 1;
}
.slidess img {
width: 100%;
height: 100%;
}
#r1:checked~.s1 {
margin-left: 0;
}
#r2:checked~.s1 {
margin-left: -20%;
}
#r3:checked~.s1 {
margin-left: -40%;
}
#r4:checked~.s1 {
margin-left: -60%;
}
#r1:checked~.navigation [for="r1"] {
background: #fff
}
#r2:checked~.navigation [for="r2"] {
background: #fff
}
#r3:checked~.navigation [for="r3"] {
background: #fff
}
#r4:checked~.navigation [for="r4"] {
background: #fff
}
#media (min-width: 200px) and (max-width: 899px) {
.slidershow {
width: 300px;
height: 201px;
overflow-x: hidden;
position: relative;
top: 90px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Border-->
<div class="rainbow"></div>
<!--Slideshow-->
<div id="outside">
<div class="slidershow middle">
<div class="slides">
<input checked id="r1" name="r" type="radio"> <input id="r2" name="r" type="radio"> <input id="r3" name="r" type="radio"> <input id="r4" name="r" type="radio">
<div class="navigation">
<label class="bar" for="r1"></label> <label class="bar" for="r2"></label> <label class="bar" for="r3"></label> <label class="bar" for="r4"></label>
</div>
<div class="slidess s1">
<h2>Slide 1.</h2><img src="https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="slidess">
<h2>Slide 2.</h2><img src="https://images.pexels.com/photos/1643409/pexels-photo-1643409.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="slidess">
<h2>Slide 3.</h2><img src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="slidess">
<h2>Slide 4.</h2><img src="https://images.pexels.com/photos/1452701/pexels-photo-1452701.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>
</div>
</div>
<script src="script.js">
</script>
</body>
</html>
You can try this.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
*, *::before, *::after {
box-sizing: border-box;
}
/* Border */
#keyframes rotate {
100% {
transform: rotate(1turn);
}
}
.rainbow {
position: relative;
z-index: 0;
border-radius: 10px;
overflow: hidden;
padding: 6px;
}
.rainbow::before {
content: '';
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: #399953;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
animation: rotate 4s linear infinite;
}
.rainbow::after {
content: '';
position: absolute;
z-index: -1;
left: 6px;
top: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
background: white;
border-radius: 5px;
}
/* Slideshow */
.slidershow {
width: 700px;
height: 400px;
overflow: hidden;
}
.middle {
position: relative;
top: 200px;
left: 50%;
transform: translate(-50%, -50%);
}
.navigation {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar {
width: 50px;
height: 10px;
border: 2px solid #3F69CA;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover {
background: #3F69CA;
}
input[name="r"] {
position: absolute;
visibility: hidden;
}
.slides {
width: 500%;
height: 100%;
display: flex;
}
.slidess {
width: 20%;
transition: 0.6s;
}
.slidess>h2 {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
text-align: center;
padding: 15px;
background: rgba(255, 255, 255, .6);
color: rgb(24, 23, 23);
font-size: 18px;
border-radius: 5px;
visibility: hidden;
opacity: 0;
transition: all .5s ease;
z-index: 2;
}
.slides .slidess:hover>h2 {
visibility: visible;
opacity: 1;
}
.slidess img {
width: 100%;
height: 100%;
}
#r1:checked~.s1 {
margin-left: 0;
}
#r2:checked~.s1 {
margin-left: -20%;
}
#r3:checked~.s1 {
margin-left: -40%;
}
#r4:checked~.s1 {
margin-left: -60%;
}
#r1:checked~.navigation [for="r1"] {
background: #fff
}
#r2:checked~.navigation [for="r2"] {
background: #fff
}
#r3:checked~.navigation [for="r3"] {
background: #fff
}
#r4:checked~.navigation [for="r4"] {
background: #fff
}
#media (min-width: 200px) and (max-width: 899px) {
.slidershow {
width: 300px;
height: 201px;
overflow-x: hidden;
position: relative;
top: 100px;
}
}
<div class="rainbow">
<div id="outside">
<div class="slidershow middle">
<div class="slides">
<input checked id="r1" name="r" type="radio"> <input id="r2" name="r" type="radio"> <input id="r3" name="r" type="radio"> <input id="r4" name="r" type="radio">
<div class="navigation">
<label class="bar" for="r1"></label> <label class="bar" for="r2"></label> <label class="bar" for="r3"></label> <label class="bar" for="r4"></label>
</div>
<div class="slidess s1">
<h2>Slide 1.</h2><img src="https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="slidess">
<h2>Slide 2.</h2><img src="https://images.pexels.com/photos/1643409/pexels-photo-1643409.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="slidess">
<h2>Slide 3.</h2><img src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="slidess">
<h2>Slide 4.</h2><img src="https://images.pexels.com/photos/1452701/pexels-photo-1452701.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>
</div>
</div>
</div>
Related
This is a gif of issue : https://gifyu.com/image/DeGX
And my code: https://jsfiddle.net/Mrsheesh/dj1L3vhq/7
i am using xampp to host this page in locale
and even jsfiddle seems laggy.
I tried to remove the image, and it worked fine.
Is there a way to fix this, without remove the image?
My code:
console.log("msg.js Loaded");
function show_msg() {
document.querySelector(".box-msg").classList.add("active");
document.querySelector(".bg-msg").classList.add("active");
}
function hide_msg() {
document.querySelector(".box-msg").classList.remove("active");
document.querySelector(".bg-msg").classList.remove("active");
}
body {
margin: 0;
}
.bg-msg {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgb(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.5s ease;
}
.bg-msg.active {
visibility: visible;
opacity: 1;
}
.box-msg {
visibility: hidden;
position: fixed;
left: 50%;
top: 10%;
transform: translateX(-50%);
height: 0;
width: 0;
max-width: 550px;
border-radius: 20px;
background-color: white;
border: 1px solid rgb(0, 0, 0, 0.5);
overflow: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.box-msg.active {
visibility: visible;
opacity: 1;
height: 400px;
width: 50%;
}
.box-msg .box-head {
height: 20%;
width: 100%;
/* background-color: blue; */
}
/* ==================================Close Button================================= */
.box-msg .box-head .close {
position: absolute;
top: 5px;
left: 5px;
height: 20px;
width: 20px;
border-radius: 5px;
cursor: pointer;
}
.box-msg .box-head .close::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "\D7";
/* use the hex value here... */
font-size: 30px;
color: #FFF;
line-height: 20px;
text-align: center;
}
/* ==================================Head IMG================================= */
.box-msg .box-head .background {
position: absolute;
width: 100%;
height: 20%;
overflow: hidden;
}
.background img {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
width: 300%;
/* animation: 10s left_right forwards; */
}
#keyframes left_right {
from {
left: 0;
}
to {
left: 100%;
}
}
/* ==================================Head Title================================= */
.box-msg .box-head .title {
position: relative;
height: 100%;
margin-left: 25px;
margin-right: 25px;
color: white;
font-size: clamp(10px, 4vw, 35px);
/* line-height: 80px;
text-align: center; */
display: flex;
justify-content: center;
align-items: center;
font-family: BebasNeue-Regular;
letter-spacing: 0.1em;
}
/* ====================================MSG Body================================= */
.box-msg .box-body {
height: 80%;
width: 100%;
/* background-color: brown; */
}
/* ======================================BTN===================================== */
.btn {
cursor: pointer;
width: 100px;
height: 50px;
background: coral;
text-align: center;
line-height: 50px;
}
<div class="btn" onclick="show_msg()">Test</div>
<div class="bg-msg"></div>
<div class="box-msg">
<div class="box-head">
<div class="background">
<img src="./img/background/bg2.jpg" alt="">
</div>
<div class="close" onclick="hide_msg()">Close</div>
<div class="title">Title</div>
</div>
<div class="box-body">
<div class="body-text">Body Text</div>
</div>
</div>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
what I want is to center the anchor tag texts vertically also I want the "contents" div to fit the screen so that if the screen gets smaller or bigger the anchor tag doesn't run off the margin creating overflow which I don't want, I tried a bunch of different ways to fix this but none seem to work, any help is appreciated! here's the code...
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
cursor: pointer;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
display:block;
z-index: 1001;
background-color: black;
overflow: hidden;
}
.no-scroll{
overflow: hidden;
}
/***********anchor tag************/
.contents {
display: table;
margin-left: 5%;
margin-right: 5%;
}
.contents a{
display: table-cell;
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
padding-left: 60px;
padding-right: 60px;
color: white;
vertical-align: middle;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
About
Home
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
You can just add display: flex; and align-items: center; to the .menu-overlay.open identifier:
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
cursor: pointer;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
.no-scroll{
overflow: hidden;
}
/***********anchor tag************/
.contents {
display: table;
margin-left: 5%;
margin-right: 5%;
}
.contents a{
display: table-cell;
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
padding-left: 60px;
padding-right: 60px;
color: white;
vertical-align: middle;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
About
Home
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
You can easily achieve this using flexbox:
Here's the CSS to achieve what you want:
.menu-overlay.open {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 1;
display: block;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
.contents {
margin-left: 5%;
margin-right: 5%;
display: flex;
flex: 1;
max-width: 100%;
justify-content: space-around;
}
.contents a {
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
color: white;
}
I want to zoom background image on a hover but without change text size. How can I make this?
* { margin: 0; padding: 0; }
body {
}
.article-container {
width: 300px;
height: 200px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.article-img-holder {
width: 100%;
height: 100%;
background: url(https://awik.io/demo/background-image-zoom/traffic2.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 1s;
}
.article-img-holder:hover {
transform: scale(1.2);
}
.split-image-links {
width: 100%;
height: 100vh;
display: flex;
}
.split-image-links .split-image-link {
width: 25%;
height: 100%;
overflow: hidden;
position: relative;
}
.split-image-links .split-image-link .zoom-image {
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
}
.split-image-links .split-image-link .zoom-image .split-image-header {
z-index: 1;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
color: #fff;
}
.split-image-links .split-image-link .zoom-image .zoom-image-headline {
color: #fff;
text-align: center;
line-height: 100vh;
font-family: 'Poppins';
text-transform: uppercase;
font-size: 45px;
font-weight: 600;
}
.split-image-links .split-image-link .zoom-image.zoom-image-first {
background: linear-gradient(
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.4)
), url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 0.5s;
}
.split-image-links .split-image-link .zoom-image:hover {
transform: scale(1.1);
}
<body>
<div class="split-image-links">
<div class="split-image-link">
<div class="zoom-image zoom-image-first">
<h1 class="zoom-image-headline">who</h1>
</div>
</div>
</div>
</body>
Instead of using scale() for the entire element, work with the background-size property, that way font-size will remain untouched, lemme know if it works for you or not.
.bg {
width: 400px;
height: 240px;
margin: 30px auto;
background: url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1) no-repeat center center;
background-size: 100%; /* work with the background-size */
transition: background-size 1s ease-in-out;
position: relative;
z-index: 1;
}
.bg:hover {
background-size: 120% /* work with the background-size */
}
.bg::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
top: 0;
left: 0;
z-index: -1;
}
.bg h2 {
text-align: center;
font-size: 60px;
line-height: 230px;
font-family: sans-serif;
color: #fff;
}
<div class="bg">
<h2>WHO</h2>
</div>
Thats the expected behavior of scale, it scale every children too, to change just the bg maybe you should use other approaches.
I provide one, I hope it fit in your need.
On this approach the BG is an absolute element, isnt the container of the h1 and the hover now is on split-image-link instead of zoom-image.
* { margin: 0; padding: 0; }
body {
}
.article-container {
width: 300px;
height: 200px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.article-img-holder {
width: 100%;
height: 100%;
background: url(https://awik.io/demo/background-image-zoom/traffic2.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 1s;
}
.article-img-holder:hover {
transform: scale(1.2);
}
.split-image-links {
width: 100%;
height: 100vh;
display: flex;
}
.split-image-links .split-image-link {
width: 25%;
height: 100%;
overflow: hidden;
position: relative;
}
.split-image-links .split-image-link .zoom-image {
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
}
.split-image-links .split-image-link .zoom-image .split-image-header {
z-index: 1;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
color: #fff;
}
.split-image-links .split-image-link .zoom-image-headline {
position: relative;
color: #fff;
text-align: center;
line-height: 100vh;
font-family: 'Poppins';
text-transform: uppercase;
font-size: 45px;
font-weight: 600;
}
.split-image-links .split-image-link .zoom-image.zoom-image-first {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: linear-gradient(
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.4)
), url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 0.5s;
}
.split-image-links .split-image-link:hover .zoom-image {
transform: scale(1.1);
}
<body>
<div class="split-image-links">
<div class="split-image-link">
<div class="zoom-image zoom-image-first"></div>
<h1 class="zoom-image-headline">who</h1>
</div>
</div>
</body>
Here is the basic version of your need.
.content {
position: relative;
/* border: 1px solid red; */
display: inline-block;
}
h1 {
color: #FFF;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
}
.bg:hover, h1:hover + .bg {
transform: scale(1.1);
transition: all 1s;
}
<div class="content">
<h1>WHO</h1>
<img class="bg" src="https://awik.io/demo/background-image-zoom/traffic2.jpg" alt="background image">
</div>
Messing with the jawbreaker-esque input animation found in this code pen
The code pen only has ONE field, but if you add a second, like this...
<div class="container">
<p class="lb">username</p>
<p class="placeholder">username</p>
<input type="text" />
<div class="border"></div>
</div>
<div class="container2">
<p class="lb">username2</p>
<p class="placeholder">username2</p>
<input type="text" />
<div class="border"></div>
</div>
And then add this CSS so the 2nd field moves down below the 1st...
.container2 {
position: absolute;
top: 75%;
left: 50%;
width: 250px;
height: 50px;
transform: translate(-50%, -50%);
overflow: hidden;
}
You'll see that when you click into either input field, the desired animation happens to both.
So how could I change the JS so that it only happens to the input field you click into?
You can use $.parent() to get the parent, then target .placeholder, .border and .lb relative to the parent of the input that was clicked.
$('input[type=text]').blur(function(){
$parent = $(this).parent();
$parent.find('.placeholder').removeClass("placeholder--animate");
$parent.find('.border').removeClass("border--animate");
$parent.find('.lb').removeClass("lb--animate");
checkInput($(this));
})
.focus(function() {
$parent = $(this).parent();
$parent.find('.placeholder').addClass("placeholder--animate");
$parent.find('.border').addClass("border--animate");
$parent.find('.lb').addClass("lb--animate");
checkInput($(this));
});
function checkInput($input) {
if ( $input.val()) {
$input.prev('.placeholder').css('display', 'none');
} else {
$input.prev('.placeholder').css('display', 'visible');
}
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400,300);
body {
font-family: 'Open Sans', sans-serif;
}
.container {
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 50px;
transform: translate(-50%, -50%);
overflow: hidden;
}
input[type=text] {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: transparent;
color: #7f8c8d;
font-weight: 600;
outline: none;
border: none;
border-bottom: 1px solid #bdc3c7;
}
.placeholder {
position: absolute;
bottom: 5px;
left: 0;
margin: 0;
font-size: 13px;
color: #95a5a6;
transition: .2s all ease-out;
}
.lb {
position: absolute;
top: 10px;
left: -30px;
z-index: 40;
margin: 0;
font-size: 10px;
color: #3498db;
opacity: 0;
transition: .2s all ease-out;
}
.lb--animate {
opacity: 1;
left: 0;
}
.placeholder--animate {
left: 20px;
opacity: 0;
}
.border {
position: absolute;
bottom: 0px;
display: inline-block;
width: 0;
height: 2px;
padding: 0;
margin: 0;
background-color: #3498db;
transition: .2s width ease-out;
}
.border--animate {
width: 100%;
}
.container2 {
position: absolute;
top: 75%;
left: 50%;
width: 250px;
height: 50px;
transform: translate(-50%, -50%);
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="lb">username</p>
<p class="placeholder">username</p>
<input type="text" />
<div class="border"></div>
</div>
<div class="container2">
<p class="lb">username2</p>
<p class="placeholder">username2</p>
<input type="text" />
<div class="border"></div>
</div>
I have one problem with my menu.
This is the problem DEMO from codepen.io
In this demo you can see there is a left sidebar menu area. When you change the browser size width < 1050px then the menu opacity:0; and the button will showing on top left side (blue button).
The problem is left sidebar not opening when i click the button. The working example is here without css media screen.
Working DEMO without css media screen
Here is a code:
HTML
<div class="header-left">
Change browser size width < 1050px
<div class="menu-area">
<div class="icon-header-home-menu menu-show-hide">Click to Show Button now</div>
<div class="menu-area-wrap ">
<div class="menu-item-info">MENU AREA</div>
</div>
</div>
</div>
CSS
.header-left{
float: left;
width: 50%;
background-color:black;
color:#ffffff;
padding:10px;
}
.menu-area {
float: left;
}
.icon-header-home-menu {
margin: 0;
padding: 4px 0px 0px 0px;
margin-left: 5px;
width: 100%;
color: #ffffff;
overflow: hidden;
float: left;
font-size: 25px;
background-color:blue;
}
.menu-area-wrap {
position: absolute;
width: 230px;
height: 800px;
top: 42px;
left: 52px;
background-color:red;
}
.menu-item-info {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
padding-top: 20px;
background-color:green;
}
.menu-area-wrap.active {
opacity:1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
.menu-show-hide{
display:none;
}
#media all and (max-width: 1050px) {
.menu-show-hide {
display:block;
}
.menu-area-wrap{
position: absolute;
top: 42px;
left:0; /*changed here*/
width:100%; /*changed here*/
z-index: 1000;
font-size: 14px;
text-align: left;
background: #009688;
background-clip: padding-box;
-webkit-transition: all 0.2s ease;
display:none;
-webkit-transform-origin: left top 0px;
-webkit-transform: scale(0);
opacity:0;
}
}
JS
$('html').click(function() {
$('.menu-area-wrap').removeClass("active");
});
$(".icon-header-home-menu").click (function(e){
e.stopPropagation();
$('.menu-area-wrap').toggleClass("active");
});
$('.menu-area-wrap').click (function(e){
e.stopPropagation();
});
Try this inside your media screen:
.menu-area-wrap.active {
display: block;
}
Your media screen has display: none while your active class doesn't have display:block.
So, in desktop you were changing opacity but in mobile you are changing displays, therefore, your active class won't do anything because it still has display:none overwriting your opacity: 0.
$('html').click(function() {
$('.menu-area-wrap').removeClass("active");
});
$(".tt").click(function(e) {
e.stopPropagation();
$('.menu-area-wrap').toggleClass("active");
});
$('.menu-area-wrap').click(function(e) {
e.stopPropagation();
});
.header-left {
float: left;
width: 50%;
background-color: black;
color: #ffffff;
padding: 10px;
}
.menu-area {
float: left;
}
.icon-header-home-menu {
margin: 0;
padding: 4px 0px 0px 0px;
margin-left: 5px;
width: 100%;
color: #ffffff;
overflow: hidden;
float: left;
font-size: 25px;
background-color: blue;
}
.menu-area-wrap {
position: absolute;
width: 230px;
height: 800px;
top: 42px;
left: 52px;
background-color: red;
}
.menu-item-info {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
padding-top: 20px;
background-color: green;
}
.menu-area-wrap.active {
opacity: 1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
.menu-show-hide {
display: none;
}
#media all and (max-width: 1050px) {
.menu-show-hide {
display: block;
}
.menu-area-wrap.active {
display: block;
}
.menu-area-wrap {
position: absolute;
top: 42px;
left: 0;
/*changed here*/
width: 100%;
/*changed here*/
z-index: 1000;
font-size: 14px;
text-align: left;
background: #009688;
background-clip: padding-box;
-webkit-transition: all 0.2s ease;
display: none;
-webkit-transform-origin: left top 0px;
-webkit-transform: scale(0);
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-left">
Change browser size width
< 1050px <div class="menu-area">
<div class="icon-header-home-menu tt menu-show-hide">Click to Show Button now</div>
<div class="menu-area-wrap ">
<div class="menu-item-info">MENU AREA</div>
</div>
</div>
</div>
With animation:
Removed the display: none in mobile.
$('html').click(function() {
$('.menu-area-wrap').removeClass("active");
});
$(".tt").click(function(e) {
e.stopPropagation();
$('.menu-area-wrap').toggleClass("active");
});
$('.menu-area-wrap').click(function(e) {
e.stopPropagation();
});
.header-left {
float: left;
width: 50%;
background-color: black;
color: #ffffff;
padding: 10px;
}
.menu-area {
float: left;
}
.icon-header-home-menu {
margin: 0;
padding: 4px 0px 0px 0px;
margin-left: 5px;
width: 100%;
color: #ffffff;
overflow: hidden;
float: left;
font-size: 25px;
background-color: blue;
}
.menu-area-wrap {
position: absolute;
width: 230px;
height: 800px;
top: 42px;
left: 52px;
background-color: red;
}
.menu-item-info {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
padding-top: 20px;
background-color: green;
}
.menu-area-wrap.active {
opacity: 1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
.menu-show-hide {
display: none;
}
#media all and (max-width: 1050px) {
.menu-show-hide {
display: block;
}
.menu-area-wrap {
position: absolute;
top: 42px;
left: 0;
/*changed here*/
width: 100%;
/*changed here*/
z-index: 1000;
font-size: 14px;
text-align: left;
background: #009688;
background-clip: padding-box;
-webkit-transition: all 0.2s ease;
-webkit-transform-origin: left top 0px;
-webkit-transform: scale(0);
opacity: 0;
}
.menu-area-wrap.active {
opacity: 1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-left">
Change browser size width
< 1050px <div class="menu-area">
<div class="icon-header-home-menu tt menu-show-hide">Click to Show Button now</div>
<div class="menu-area-wrap ">
<div class="menu-item-info">MENU AREA</div>
</div>
</div>
</div>