I have the below code, where the loading animation is not working in IOS devices
I have used transform: rotate which is not working on IOS but they are working fine on android devices
any reason why this code is not working, I have tried various ways mentioned on the StackOverflow but still they are not working
body{
background: blueviolet;
}
.loading-steps {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 300px;
margin: 40px auto 0 auto;
}
.load-animation {
transition: all 450ms;
}
ol, ul {
list-style: none;
}
.loading-steps li {
margin-bottom: 15px;
display: flex;
position: relative;
height: 21px;
font-size: 13px;
color: black;
font-weight: 400;
}
.box {
position: absolute;
margin-bottom: 0.25em;
vertical-align: top;
transition: 0.3s color, 0.3s border, 0.3s transform, 0.3s opacity;
margin-right: 0;
left: -3px;
margin-top: -4px;
}
.loading {
border: 3px solid #4D86C8;
border-top-color: #FFDD51;
border-radius: 50%;
-webkit-animation: 1s webkit-loading linear;
animation: 1s loading linear;
animation-iteration-count: initial;
position: relative;
display: inline-block;
width: 1.5em;
height: 1.5em;
color: inherit;
vertical-align: middle;
pointer-events: none;
position: relative;
display: flex;
justify-content: center;
margin: 0px auto;
-o-animation-fill-mode: both;
opacity: 0;
transition: .5s;
}
.loading {
border: 3px solid #4d86c8;
border-top-color: #ffdd51;
border-radius: 50%;
-webkit-animation: 1s webkit-loading linear;
animation: 1s loading linear;
animation-iteration-count: initial;
position: relative;
display: inline-block;
width: 1.5em;
height: 1.5em;
color: inherit;
vertical-align: middle;
pointer-events: none;
position: relative;
display: flex;
justify-content: center;
margin: 0px auto;
-o-animation-fill-mode: both;
opacity: 0;
transition: 0.5s;
}
.loading:before {
content: "";
display: block;
width: inherit;
height: inherit;
position: absolute;
top: -0.4em;
left: -0.4em;
border-radius: 50%;
opacity: 0.5;
}
#-webkit-keyframes webkit-loading {
0% {
-webkit-transform: rotate(0deg);
-webkit-opacity: 1;
}
50% {
-webkit-transform: rotate(360deg);
-webkit-opacity: 1;
}
90% {
-webkit-transform: rotate(360deg);
-webkit-opacity: 1;
}
100% {
-webkit-transform: rotate(360deg);
-webkit-opacity: 0;
-webkit-transform: scale(0);
}
}
#keyframes loading {
0% {
transform: rotate(0deg);
opacity: 1;
}
50% {
transform: rotate(360deg);
opacity: 1;
}
90% {
transform: rotate(360deg);
opacity: 1;
}
100% {
transform: rotate(360deg);
opacity: 0;
transform: scale(0);
}
}
.loading:before {
content: '';
display: block;
width: inherit;
height: inherit;
position: absolute;
top: -0.4em;
left: -0.4em;
border-radius: 50%;
opacity: 0.5;
}
li svg {
width: 15px;
margin-right: 8px;
margin-top: -6px;
}
<body>
<div class="loading-steps load-animation">
<ul>
<li>
<div class="box">
<div class="loading" style="animation-delay: 2s;"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve"><polyline class="path" fill="none" points="20,6 9,17 4,12" stroke="#FFDD51" stroke-miterlimit="10" stroke-width="3" style="animation-delay: 2s;"></polyline></svg>
</li>
<li>
<div class="box">
<div class="loading" style="animation-delay: 2.5s;"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve"><polyline class="path" fill="none" points="20,6 9,17 4,12" stroke="#FFDD51" stroke-miterlimit="10" stroke-width="3" style="animation-delay: 2.5s;"></polyline></svg>
</li>
</ul>
</div>
</body>
Related
I am trying to create an egg that cracks open, it works, but the animation starts on its own. How can I make it work that the egg only opens when the user clicks on it?
I've tried using jQuery, javascript and only css. And searched the whole internet. But I just don't get it to work. This is my first animation, so I don't know much about it.
Here is my code:
<div id="easter-egg-animation">
<div class="easter-egg">
<div class="egg">
<div class="egg-top">
<div class="day">1
</div>
</div></div>
<div class="egg-bottom"></div>
<div class="shadow"></div>
<div class="text">happy <br> easter</div>
</div>
body {
display: flex;
background: grey;
align-items: center;
justify-content: center;
height: 100vh;
}
#easter-egg-animation {
position: relative;
cursor: pointer;
transform: translate(-90%);
transition-property: transform;
transition-duration: 9s;
}
.egg {
}
.day {
position: relative;
align-items: center;
justify-content: center;
top: 45px;
left: 65px;
font-size: 30px;
padding-top: 30px;
color: white;
}
.egg-top {
border-radius: 50% 50% 70% 30% / 100% 100% 0% 0%;
background-color: pink;
width: 140px;
height: 120px;
position: absolute;
transform-origin: left;
top: -20px;
left: 0;
right: 20px;
animation: open .5s ease forwards .5s;
}
#keyframes open {
0% {transform: rotate(0);}
100% {transform: rotate(-150deg); top: 90px; left: -30px;}
}
.egg-bottom {
border-radius: 0% 100% 50% 50% / 0% 0% 100% 100%;
background-color: pink;
width: 140px;
height: 80px;
position: relative;
top: 100px;
}
.egg:before, .egg:after, .egg-top:before, .egg-bottom:before {
content:"";
position: absolute;
border-style: solid;
}
.egg:before {
top: -0px;
}
.egg:after {
top: -0px;
left: 140px;
}
.egg-top:before {
top: 10px;
}
.egg-top:after {
content:"";
position: absolute;
width: 25px;
height: 60px;
border-radius: 50%;
transform: rotate(-27deg);
top: 15px;
left: 115px;
}
.shadow {
position: absolute;
width:220px;
height:30px;
background-color: rgba(0,0,0,.1);
border-radius:50%;
z-index:-1;
top:147px;
left:-27px;
}
.text {
position: absolute;
top: 110px;
left: 45px;
text-align: center;
color: pink;
font-size: 24px;
z-index:-1;
background-color: white;
transform-origin: bottom;
animation: up 1s ease forwards 1.5s;
}
#keyframes up {
0% {transform: translateY(0) scale(1);}
100% {transform: translateY(-80px) scale(2);}
}
We have a main index page with a dropdown menu and slide show, and the z-index works fine, but in our other pages, we removed the slideshow and left the dropdown menu. But for some reason in the pages without the slideshow, the dropdown menu gets hidden behind the container the slideshow used to be, despite the removal of all slideshow HTML. This leads me to believe it is a CSS issue.
Any suggestions would be well appreciated!
Here's the HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stigler Public Schools</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="\\stigler-web\web\New Website\caleab\stiglerstylesheet.css"/>
</head>
<body>
<img class="logo" src="sps_logo.png" alt="Stigler Public Schools">
<p class="header">Stigler Public Schools</p>
<div class="nav">
<ul class="navigation">
<a class="main" href="#url">District</a>
<li class="n1">High School</li>
<li class="n2">Middle School</li>
<li class="n3">Grade School</li>
<li class="n4">Administration</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Resources</a>
<li class="n1">School Calender</li>
<li class="n2">Menus</li>
<li class="n3">Employment</li>
<li class="n4">Counseling</li>
<li class="n5">Grade Book</li>
<li class="n6">Yearbook</li>
</ul>
</td>
<ul class="navigation">
<a class="main" href="#url">Organizations</a>
<li class="n1">Athletics</li>
<li class="n2">Music</li>
<li class="n3">Drama</li>
<li class="n4">FFA</li>
<li class="n5">A-Z</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Board Of Education</a>
<li class="n1">Information</li>
<li class="n2">Meetings</li>
<li class="n3">Policies</li>
</ul>
</div>
</body>
</html>
And Here's the CSS
* {
margin: 0px;
padding: 0px;
outline: none;
border: 0px;
}
body {
background-image: url(background.png);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
margin: 0px auto;
padding: 0px;
width: 100%;
overflow: hidden;
}
h1 {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
color: #e60000;
font-family: century gothic;
text-align: center;
color: #FF000;
}
h2 {
font-family: century gothic;
}
h3 {
font-family: century gothic;
}
h5 {
font-family: californian fb;
font-szie: 1.15em;
}
p {
border-top: none;
border-left: none;
border-bottom: none;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
table#sitelinks td {
font-size: 1.15em;
}
table#sitelinks tr:nth-child(odd) {
background-color: #fff
}
table tr:nth-child(even) {
background-color: #fff
}
table tr:nth-child(odd) {
background-color: #eee
}
hr {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
th {
text-align: left;
font-family: century gothic;
padding: 10px 0px 0px 0px;
font-size: 1.15em;
}
td {
font-family: century gothic;
border: 1px solid black;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 1em;
}
.center {
text-align: center;
}
.blue {
color: blue;
}
.bottomborder {
text-align: center;
border-bottom: 5px groove red;
}
a:link {
color: #e60000;
text-decoration: none
}
a:visited {
color: #e60000;
text-decoration: none
}
a:hover {
color: #e60000;
text-decoration: none
}
a:active {
color: #e60000;
text-decoration: none
}
.logo {
display: block;
margin: 0 auto;
height: 160px;
width: 160px;
}
.header {
padding-left: 140px
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
.navwrapper {}
.nav {
width: 79.31%;
text-align: center;
margin: 0px auto;
z-index: 2;
position: relative;
}
a:hover {
color: #FF0000;
}
/* NAVIGATION */
.navigation {
list-style: none;
margin: 0;
padding: 0;
height: 40px;
margin: 10px auto;
background: #FF0000;
float: left;
position: relative;
z-index: 10
}
.navigation,
.navigation a.main {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 0px 0px 0 0;
-webkit-border-radius: 0px 0px 0 0;
-moz-border-radius: 0px 0px 0 0;
}
.navigation a.main {
display: inline-block;
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.navigation:hover a.main {
color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.04);
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
position: relative;
z-index: 30;
overflow: visible;
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.3s;
-o-transition: 0.2s linear 0.3s;
transition: 0.2s linear 0.3s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.1s;
-o-transition: 0.2s linear 0.1s;
transition: 0.2s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n4 {
transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n6 {
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s
}
/* End Navigation */
/*Slideshow */
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
display: none;
overflow: hidden;
}
.slideshowimg {
min-width: 100%;
max-width: 100%;
max-height: none;
border: 2px solid #ffffff
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
min-width: 1000px;
min-height: 500px;
max-height: 500px;
position: fixed;
margin: 0px auto;
clear: both;
z-index: 1;
position: relative;
overflow: hidden;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 30px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
/* End Slideshow */
I fixed this on my own. I realized that since there was no more content under the drop-down menu, the page technically ended, hence the disappearing menu. At least that's my conclusion. After adding the intended content to the page, they worked just fine.
I want to add :hover this class ".pic".
So it can contain more description on .pic:hover
I use transform SASS, width, and height on .pic:hover that seems not working.
I can't find out the problem.
Please help to find out my question.
Please watch it on my codepen for any details
.pic
width: 250px
height: 250px
//it doesn't get bigger when mouse is hovering over it
.pic:hover
width: 400px
height: 400px
Codepen
Your code isn't formatted correctly. With CSS, make sure to surround everything with brackets {}. Also make sure to add a semicolon after every line in a class so it knows where to break it up. Change your code to the below and it'll work:
// Adding {} and ; fixed this issue
.pic {
width: 250px;
height: 250px;
}
.pic:hover {
width: 400px;
height: 400px;
}
You can do something like this,
.item {
position: relative;
border: 1px solid #333;
margin: 2%;
overflow: hidden;
width: 540px;
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
<div class="item">
<img src="https://image.freepik.com/free-vector/technological-background-with-circular-shapes_1035-4291.jpg" alt="pepsi" width="540" height="548">
<div class="item-overlay top"></div>
</div>
Your code,
#charset "UTF-8";
* {
font-family: 微軟正黑體;
position: relative;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
background: linear-gradient(#fc68d7, #8a3ab9, #bc2a8d, #cd486b, #e95950, #fbad50, #fccc63);
display: flex;
justify-content: center;
align-items: center;
}
.camera {
width: 200px;
height: 200px;
border: 10px solid #fff;
border-radius: 50px;
position: absolute;
transform: translateY(-50%);
animation: ballUp 0.5s 1s both, ballDown 0.2s 1.5s ease-in both, cameraIn 0.3s 1.7s both;
perspective: 500;
-webkit-perspective: 500;
}
.lens {
width: 100px;
height: 100px;
border-radius: 50%;
border: 15px solid #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: lensIn 0.3s 1.85s backwards;
}
.flashlight {
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
position: absolute;
right: 20px;
top: 20px;
animation: flashlightIn 0.3s 2.15s backwards;
}
.flashlight:after {
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: flash 0.3s 2.45s both;
}
.pic {
width: 250px;
height: 250px;
border: 5px solid #fff;
border-bottom: 25px solid #fff;
background: #ccc;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: picIn 1s 2.48s both, picFlip 1s 3.5s both;
overflow: hidden;
transition: 0.3s;
box-sizing: border-box;
}
.pic:hover img {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.pic img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#keyframes ballUp {
0% {
top: 50%;
width: 5px;
height: 5px;
opacity: 0;
}
10% {
opacity: 1;
}
100% {
top: 10%;
width: 5px;
height: 5px;
}
}
#keyframes ballDown {
0% {
top: 10%;
}
100% {
top: 50%;
}
}
#keyframes cameraIn {
0% {
width: 5px;
height: 5px;
}
80% {
width: 250px;
height: 250px;
}
100% {
height: 200px;
width: 200px;
}
}
#keyframes lensIn {
0% {
width: 0;
height: 0;
opacity: 0;
}
10% {
opacity: 1;
}
80% {
width: 120px;
height: 120px;
}
100% {
width: 100px;
height: 100px;
}
}
#keyframes flashlightIn {
0% {
transform: scale(0);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes flash {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes picIn {
0% {
height: 0;
width: 0;
top: 100%;
transform: translate(-50%, 0);
opacity: 0;
}
100% {
height: 120px;
width: 120px;
top: 100%;
transform: translate(-50%, 0);
opacity: 1;
}
}
#keyframes picFlip {
0% {
transform: translate(-50%, 0) rotateX(0deg);
top: 100%;
width: 120px;
height: 120px;
}
100% {
transform: translate(-50%, -50%) rotateX(360deg);
top: 50%;
width: 250px;
height: 250px;
}
}
#keyframes showImg {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="wrapper">
<div class="camera">
<div class="lens"></div>
<div class="flashlight"></div>
<div class="pic">
<div class="imgbox"><img src="https://image.freepik.com/free-vector/technological-background-with-circular-shapes_1035-4291.jpg" alt=""/></div>
<div class="text">
<h1>Hello</h1>
<h2>This is my memory</h2>
</div>
</div>
</div>
</div>
or zoom out with text inside,
#charset "UTF-8";
* {
font-family: 微軟正黑體;
position: relative;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
background: linear-gradient(#fc68d7, #8a3ab9, #bc2a8d, #cd486b, #e95950, #fbad50, #fccc63);
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
h5 {
position: absolute;
left: 0px;
top: 0px;
bottom: 0;
z-index: -1;
}
.camera {
width: 200px;
height: 200px;
border: 10px solid #fff;
border-radius: 50px;
position: absolute;
transform: translateY(-50%);
animation: ballUp 0.5s 1s both, ballDown 0.2s 1.5s ease-in both, cameraIn 0.3s 1.7s both;
perspective: 500;
-webkit-perspective: 500;
}
.lens {
width: 100px;
height: 100px;
border-radius: 50%;
border: 15px solid #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: lensIn 0.3s 1.85s backwards;
}
.flashlight {
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
position: absolute;
right: 20px;
top: 20px;
animation: flashlightIn 0.3s 2.15s backwards;
}
.flashlight:after {
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: flash 0.3s 2.45s both;
}
.pic {
width: 250px;
height: 250px;
border: 5px solid #fff;
border-bottom: 25px solid #fff;
background: #ccc;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: picIn 1s 2.48s both, picFlip 1s 3.5s both;
overflow: hidden;
transition: 0.3s;
box-sizing: border-box;
}
.pic:hover img {
-moz-transform: scale(0.65);
-webkit-transform: scale(0.65);
transform: scale(0.65);
}
.pic img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#keyframes ballUp {
0% {
top: 50%;
width: 5px;
height: 5px;
opacity: 0;
}
10% {
opacity: 1;
}
100% {
top: 10%;
width: 5px;
height: 5px;
}
}
#keyframes ballDown {
0% {
top: 10%;
}
100% {
top: 50%;
}
}
#keyframes cameraIn {
0% {
width: 5px;
height: 5px;
}
80% {
width: 250px;
height: 250px;
}
100% {
height: 200px;
width: 200px;
}
}
#keyframes lensIn {
0% {
width: 0;
height: 0;
opacity: 0;
}
10% {
opacity: 1;
}
80% {
width: 120px;
height: 120px;
}
100% {
width: 100px;
height: 100px;
}
}
#keyframes flashlightIn {
0% {
transform: scale(0);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes flash {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes picIn {
0% {
height: 0;
width: 0;
top: 100%;
transform: translate(-50%, 0);
opacity: 0;
}
100% {
height: 120px;
width: 120px;
top: 100%;
transform: translate(-50%, 0);
opacity: 1;
}
}
#keyframes picFlip {
0% {
transform: translate(-50%, 0) rotateX(0deg);
top: 100%;
width: 120px;
height: 120px;
}
100% {
transform: translate(-50%, -50%) rotateX(360deg);
top: 50%;
width: 250px;
height: 250px;
}
}
#keyframes showImg {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="wrapper">
<div class="camera">
<div class="lens"></div>
<div class="flashlight"></div>
<div class="pic">
<div class="imgbox">
<h5>
Tech-Background
</h5>
<img src="https://image.freepik.com/free-vector/technological-background-with-circular-shapes_1035-4291.jpg" alt="" />
</div>
<div class="text">
<h1>Hello</h1>
<h2>This is my memory</h2>
</div>
</div>
</div>
</div>
Your problem is wrong css. You have to use curly braises and semi colons as well.
.pic{
width: 250px;
height: 250px;
}
.pic:hover{
width: 400px;
height: 400px;
}
I am trying to get an overlay over some images I have tried so many ways and I can't seem to get it over the image. The overlay either goes above or below, but won't go over the image. any help would be awesome!
Here is my code:
.friend-profiles {
font-family: "Lora", serif;
width: 52%;
padding-top: 15px;
}
.title-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
text-align: center;
width: 100%;
border: 1px solid #dedede;
box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.1);
outline: none;
height: 35px;
}
.sort {
border: 1px solid #272727;
padding: 1px 10px;
font-size: 8px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
border-radius: 0;
}
.sort:focus {
outline: none;
}
.friends-list{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.friend-profilePic {
margin-bottom: 15px;
width: 200px;
height: 150px;
}
.box {
width: 200px;
height: 150px;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
background-size:cover;
overflow:hidden;
}
.overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;}
.box:hover .overlay {
opacity:1;}
<div class="friend-profiles">
<nav class="title-header">
<a ui-sref="friend-search"><img src="/images/Icons/Search.svg"></a>
<input class="search-friends" type="text" placeholder="Search For Friends" onfocus="this.placeholder=''" onblur="this.placeholder = 'Search For Friends'">
</nav>
<div class="friends-list">
<div ng-repeat="results in userResults">
<img ng-src="{{results.profileUrl}}" class="friend-profilePic">
<div class="box">
<div class="overlay">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
I have added some element and style, that .box position to absolute.
.friend-profiles {
font-family: "Lora", serif;
width: 52%;
padding-top: 15px;
}
.title-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
text-align: center;
width: 100%;
border: 1px solid #dedede;
box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.1);
outline: none;
height: 35px;
}
.sort {
border: 1px solid #272727;
padding: 1px 10px;
font-size: 8px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
border-radius: 0;
}
.sort:focus {
outline: none;
}
.friends-list{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.friend-profilePic {
width: 200px;
height: 150px;
}
.picture-wrapper {
position:relative;
overflow:hidden;
}
.box {
position:absolute;
top:0;left:0;
width: 100%;
height: 100%;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
background-size:cover;
overflow:hidden;
}
.overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
width:100%;height:100%;
}
.box:hover .overlay {
opacity:1;}
<div class="friend-profiles">
<nav class="title-header">
<a ui-sref="friend-search"><img src="/images/Icons/Search.svg"></a>
<input class="search-friends" type="text" placeholder="Search For Friends" onfocus="this.placeholder=''" onblur="this.placeholder = 'Search For Friends'">
</nav>
<div class="friends-list">
<div ng-repeat="results in userResults" class="picture-wrapper">
<img ng-src="{{results.profileUrl}}" class="friend-profilePic">
<div class="box">
<div class="overlay">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
Your question in confusing but As much as I understood you want to show text or another image on image hover
Here is the code:
If it's not what meant tell me.
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(75,75,75,0.7);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(48, 152, 157, 0.4);
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover h2 {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
margin: -52px 0 0 0;
padding: 62px 100px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
<div style="width:350px; height:200px;">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
How to use images instead of text labels?
I need the menu to slide down when the .logo (bird) image button is clicked
How can I link text label with a logo image on the menu bar?
PS: the menu slides down when the .logo (bird) is clicked BUT there are two birds, I need the menu to slide down when the bird image sitting on the menu is clicked, AND yes I need only one bird image
/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
.row-basic {
max-width: 1216px;
}
html,
body {
text-align:justify
color: #fff;
font-size: 19px;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
/* ------------------------------------------ */
/* HEADER */
/* ------------------------------------------ */
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display:flex;
justify-content: space-between;
}
/* ----- NAVIGATION -----*/
nav {
display:flex;
align-items: center;
}
nav ul {
display:flex;
}
.user-tools {
display:flex;
align-items: center;
}
.user-tools :focus {
outline:none;
}
/* ----- LOGO -----*/
.logo {
position: relative;
cursor: pointer;
height: 68px;
width: auto;
margin-right: 21px;
margin-left: 31px;
z-index: 1;
}
/* ----- MENU BUTTON -----*/
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
/* ------------------------------------------ */
/* PAGE CONTENT TOP BAR */
/* ------------------------------------------ */
.box1 {
height: 26px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 26px;
width: 300px;
background: #b14242;
}
.box3 {
height: 26px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: all 0.3s ease-in-out 0s;
position:relative;
margin-top: -260px;
z-index: 0; }
.toggle {
transition: all 0.3s ease-in-out 0s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -225px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.topbar {
display:flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out 0s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.topbar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.topbar li:hover {
color: rgba(255, 255, 255,1); }
#topbartoggler {
display: none; }
#topbartoggler:checked + .page-wrap .topbar {
top: -4px; }
#topbartoggler:checked + .page-wrap .toggle {
top: -5px; }
#topbartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<body>
<input type="checkbox" id="topbartoggler" name="" value="">
<div class="page-wrap">
<div class="topbar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<header class="row-basic">
<nav>
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
</nav>
<div class="user-tools">
<div class="toggle"></div>
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>
OK So I have found out all I needed to do was to replace
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
with
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
JSFiddle https://jsfiddle.net/heumnzLe/4/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
.row-basic {
max-width: 1216px;
}
html,
body {
text-align:justify
color: #fff;
font-size: 19px;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display:flex;
justify-content: space-between;
}
nav {
display:flex;
align-items: center;
}
nav ul {
display:flex;
}
.user-tools {
display:flex;
align-items: center;
}
.user-tools :focus {
outline:none;
}
.logo {
position: relative;
cursor: pointer;
height: 68px;
width: auto;
margin-right: 21px;
margin-left: 31px;
z-index: 1;
}
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
.box1 {
height: 26px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 26px;
width: 300px;
background: #b14242;
}
.box3 {
height: 26px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: all 0.3s ease-in-out 0s;
position:relative;
margin-top: -260px;
z-index: 0; }
.toggle {
transition: all 0.3s ease-in-out 0s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -225px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.topbar {
display:flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out 0s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.topbar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.topbar li:hover {
color: rgba(255, 255, 255,1); }
#topbartoggler {
display: none; }
#topbartoggler:checked + .page-wrap .topbar {
top: -4px; }
#topbartoggler:checked + .page-wrap .toggle {
top: -5px; }
#topbartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<body>
<input type="checkbox" id="topbartoggler" name="" value="">
<div class="page-wrap">
<div class="topbar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<header class="row-basic">
<nav>
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
</nav>
<div class="user-tools">
<div class="toggle"></div>
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>