Html, Flipcard not working properly and logos overlap problem - html

The code:
<html>
<style>
.img
{
max-width: 100%;
}
.Headerstyle
{
color:Black;
transition: transform .2s;
text-align: center;
margin-top: 80vh;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack
{
color:white;
transition: transform .2s;
text-align: center;
margin-top: 80vh;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
body {
border-style: solid;
border-width: 15px;
border-radius: 5px;
padding: 10px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
position: relative;
width: 100%;
margin: 0px auto;
padding: 10px 3px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 7px;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: orange;
#color: white;
#background-image: url('');
background-size: cover;
transform: rotateY(180deg);
}
</style>
<body >
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b>Get in Touch With Me</b></p>
<div><div style="display: flex;justify-content: center;">
<a href="https://stackoverflow.com/"><img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"
alt="stackoverflow icon" width="60" height="60"></a>
<a href="https://www.linkedin.com"><img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
alt="linkedin icon" width="60" height="60"></a>
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>E-MAIL ADRESS</b></p>
<div><div style="display: flex;justify-content: center;">
<a href="https://stackoverflow.com/"><img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png"
alt="stackoverflow icon" width="60" height="60"></a>
<a href="https://www.linkedin.com"><img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png"
alt="linkedin icon" width="60" height="60"></a>
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hello friends, I had more than one question:
The logos are on the border and there is an overlap problem. How can I fix this for both sides (front and back)? The shape which I want is available in the image below.
The size of the Stackoverflow logo does not change on both sides when hovering over it.
I want to change the color of the blue bar which is moving on the container to white when it turns back side.
4) How can I make the flip card move more accurately? When a mouse comes to the body part, it immediately turns around.


You can use like this if you want:
<html>
<style>
.img {
max-width: 100%;
}
.Headerstyle {
color: Black;
transition: transform .2s;
text-align: center;
margin-top: 41%;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack {
color: white;
transition: transform .2s;
text-align: center;
margin-top: 41%;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 5%;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
body {
border-style: solid;
border-width: 17px;
border-radius: 5px;
padding: 100px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
width: 100%;
margin: 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
.LoadingBack {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #000000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.LoadingBack:after {
content: '';
position: absolute;
background: white;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1.5s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: orange;
#color: white;
#background-image: url('');
background-size: cover;
transform: rotateY(180deg);
}
</style>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b>Get in Touch With Me</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>E-MAIL ADRESS</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon" width="60" height="60">
<img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="LoadingBack"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

How can i show text from the bottom on hover?

I cannot figure out how to fixate the first part of the text and to make it show from the bottom
on the left is the hover that slides from the bottom and on the right is how it should look like in the beginning
Ive put the code I tried to use inside - please take a look
Thank you!
.container {
padding: 1em 0;
float: left;
width: 50%;
}
.image1 {
display: block;
width: 100%;
height: auto;
transition: all 0.5s ease;
opacity: 1;
backface-visibility: hidden;
}
.middle {
background: rgb(30, 30, 36);
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: rgb(246, 244, 234);
margin: 0px;
}
.middle:hover {
transition: all 0.3s ease-in-out 0s;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.product-box {
overflow: hidden;
}
.product-box:hover img {
transform: scale(1.04);
transition: all 0.8s linear;
}
.product-box:hover {
background: rgba(30, 30, 36, 0.6) !important;
}
.product-box:hover .image1 {
opacity: 0.5;
background: transparent;
}
.product-box:hover .middle {
opacity: 1;
}
.fadeIn-bottom {
top: 80%;
}
<div class="container">
<div class="product-box fadeIn-bottom" style="margin-top: 20px;">
<img src="https://phpmysqlappdiag454.blob.core.windows.net/blob/assets/images/hotelkos/Rectangle 14.png" alt="" data-filename="1.png" style="width: 100%; height: auto; margin-bottom: -40px;" class="image1">
<div class="middle ">
<p style="color: #F6F4EA;">Suites</p>
</div>
<div>
</div>

What you have to do is put the relative, i.e. the product-box in a relative position, then set the absolute position to the "title" to which you want to apply the transition. Once this is done, you need to know how to use transitions and how absolute position works. These two things are important enough to make several cool and simple animations so I recommend you to check them out.
.product-box {
position: relative;
}
.image1 {
width: 100%;
height: 100%;
}
.title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 90%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, .5);
color: white;
transition: all .5s;
}
.product-box:hover .title {
top: 0;
}
<div class="container">
<div class="product-box">
<div class="title">
<h4>Suites</h4>
</div>
<img src="https://phpmysqlappdiag454.blob.core.windows.net/blob/assets/images/hotelkos/Rectangle 14.png" alt="" data-filename="1.png" class="image1">
<div>
</div>

I assume this is what you want;
.container {
width: 50%;
}
.image1 {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
transition: all 0.5s ease;
opacity: 1;
}
.product-box {
display: flex;
position: relative;
}
.middle {
position: absolute;
width: 100%;
color: #F6F4EA;
background: rgb(30, 30, 36);
font-weight: 400;
font-size: 16px;
line-height: 22px;
margin: 0px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
font-family: sans-serif;
display: flex;
bottom: 0;
justify-content: center;
align-items: center;
}
.product-box:hover {
transform: scale(1.04);
transition: all 0.8s linear;
}
.product-box:hover .middle {
opacity: 0.8;
height: 100%;
padding: 0;
}
<div class="container">
<div class="product-box">
<img src="https://phpmysqlappdiag454.blob.core.windows.net/blob/assets/images/hotelkos/Rectangle 14.png" alt="" class="image1">
<div class="middle">Suites</div>
</div>
</div>

HTML, Moving Problem of Bar and Footer Sections

I had 2 questions. These are like as below:
First, How can I move the animation of the moving bar (blue colored) above the border at the top? Second, How can I move text (get in touch with me) and logos (LinkedIn and StackOverflow) centered to the bottom of the page? I have added some descriptions to the image.
The code:
.headerStyle {
border-color: black;
}
body {
border-style: solid;
border-width: 10px;
border-radius: 5px;
padding: 10px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
position: relative;
width: 100%;
margin: 0px auto;
padding: 0px 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10px;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 4px;
overflow: hidden;
}
.Loading:after {
content: "";
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%;
}
50% {
width: 10%;
left: 90%;
}
75% {
width: 50%;
left: 0%;
}
100% {
width: 10%;
left: 0%;
}
}
#keyframes pulse {
0% {
border-color: red;
}
25% {
border-color: orange;
}
50% {
border-color: brown;
}
75% {
border-color: #d94d5f;
}
100% {
border-color: #ffcccb;
}
}
<html>
<body>
<div class="footer">
<p class="headerStyle"><b>Get In Touch With Me</b></p>
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<a href="https://www.linkedin.com"><img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</a>
<div class="container">
<div class="Loading"></div>
</div>
</div>
</body>
</html>

By "moving the loading bar above the border", I am assuming that you want the loading bar instead of the top border!
You can set the border-top: none for the body tag and move the loading div to the top most part.
For centering the text you can use text-align and for the images use the flex property.
<html>
<html>
<style>
.headerStyle {
border-color: black;
text-align: center;
margin-top: 85vh;
}
.flex-box {
display: flex;
justify-content: center;
}
body {
border-style: solid;
border-top: none;
border-width: 10px;
border-radius: 5px;
padding: 10px;
transition: 5s;
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
position: relative;
width: 100%;
margin: 0px auto;
padding: 0px 0px;
}
.Loading {
position: relative;
width: 100%;
height: 10px;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: red;
}
25% {
border-color: orange;
}
50% {
border-color: brown;
}
75% {
border-color: #d94d5f;
}
100% {
border-color: #ffcccb;
}
}
</style>
<body>
<div class="footer">
<div class="container">
<div class="Loading"></div>
</div>
<p class="headerStyle"><b>Get In Touch With Me</b></p>
<div class="flex-box">
<a href="https://stackoverflow.com/"><img class="image1"
src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60"
height="60"></a>
<a href="https://www.linkedin.com"><img class="image2"
src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60"
height="60">
</a>
</div>
</div>
</body>
</html>

<html>
<style>
.headerStyle{
border-color: black;
}
body {
border-style: solid;
border-width: 10px;
border-radius: 5px;
padding: 10px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
position: relative;
width: 100%;
margin: 0px auto;
padding: 0px 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10px;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: red;
}
25% {
border-color: orange;
}
50% {
border-color: brown;
}
75% {
border-color: #d94d5f;
}
100% {
border-color: #ffcccb;
}
}
</style>
<body>
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
">
<p class="headerStyle"><b>Get In Touch With Me</b></p>
<div> <div style="
display: flex;
justify-content: center;
">
<a href="https://stackoverflow.com/"><img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"
alt="stackoverflow icon" width="60" height="60"></a>
<a href="https://www.linkedin.com"><img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
alt="linkedin icon" width="60" height="60">
</a>
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</body>
</html>
.footer set
display: flex; is use to set flexbox.
flex-direction: Column; is use to set flexbox direction.
justify-content: space-between is use to set space between items.
.footer inside logos and bottom bar set on div
logos > div set display: flex; and justify-content: center; set logos in center.

Here i changed some corruption in your code hope you can find the sollution .
you check in below code
.headerStyle{
border-color: black;
}
body {
border-style: solid;
border-width: 10px;
border-radius: 5px;
padding: 10px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
position: relative;
width: 100%;
margin: 0px auto;
padding: 0px 0px;
height: 100vh;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10px;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: red;
}
25% {
border-color: orange;
}
50% {
border-color: brown;
}
75% {
border-color: #d94d5f;
}
100% {
border-color: #ffcccb;
}
}
.footer .contact-us {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="footer">
<div class="contact-us">
<p class="headerStyle"><b>Get In Touch With Me</b></p>
<a href="https://stackoverflow.com/"><img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"
alt="stackoverflow icon" width="60" height="60"></a>
<a href="https://www.linkedin.com"><img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
alt="linkedin icon" width="60" height="60">
</a>
</div>
<div class="container">
<div class="Loading"></div>
</div>
</div>
</body>

Stop scrolling at the top of slider when click link href target id pure css

I have a pure css slider here but the problem is I dont want to scroll at the top of the slider when click the bullet and arrow navigation from the extra space.
Is there any way to achieve this with pure html or css?
I tried a href="#s3/" and a href="#s3!" but it's not working.
Looking for pure html and css solution since we have no script cms. Thanks
.wrapper {
overflow:scroll;
height:700px;
}
/* For visual purpose only */
.extra-space {
width: 100%;
height: 300px;
background: red;
line-height: 300px;
text-align: center;
}
/*slider*/
.CSSgal {
position: relative;
overflow: hidden;
/* Or set a fixed height */
}
/* SLIDER */
.CSSgal .slider {
height: 100%;
white-space: nowrap;
font-size: 0;
transition: 0.8s;
}
/* SLIDES */
.CSSgal .slider>* {
display: inline-block;
white-space: normal;
vertical-align: top;
height: 100%;
width: 100%;
background: none 50% no-repeat;
background-size: cover;
}
/* PREV/NEXT, CONTAINERS & ANCHORS */
.CSSgal .prevNext {
position: absolute;
z-index: 1;
top: 50%;
width: 100%;
height: 0;
}
.CSSgal .prevNext>div+div {
visibility: hidden;
/* Hide all but first P/N container */
}
.CSSgal .prevNext a {
text-align: center;
opacity: 0.7;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 0;
position: absolute;
width: 30px;
height: 30px;
display: inline-block;
padding: 3px;
}
.CSSgal .prevNext .right {
right: 30px;
left: auto;
position: absolute;
top: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: hsla(0, 0%, 92.2%, .6) !important;
z-index: 1;
cursor: pointer;
background-image: none !important;
transition: all .3s;
}
.CSSgal .prevNext .left {
left: 30px;
position: absolute;
top: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
background-image: none !important;
background-color: hsla(0, 0%, 92.2%, .6) !important;
z-index: 1;
cursor: pointer;
transition: all .3s;
}
.CSSgal .prevNext .left:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: url(https://new.brandsforless.ae/static/media/m-sprite.7b312d28.png) no-repeat;
background-size: 300px;
display: inline-block;
background-position: -76.5px -7px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.CSSgal .prevNext .right:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: url(https://new.brandsforless.ae/static/media/m-sprite.7b312d28.png) no-repeat;
background-size: 300px;
display: inline-block;
background-position: -49px -7.5px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.CSSgal .prevNext a:hover {
background-color: #ebebeb!important;
}
.CSSgal .prevNext a+a {
left: auto;
right: 0;
}
/* NAVIGATION */
.CSSgal .bullets {
position: absolute;
z-index: 2;
bottom: 0;
padding: 10px 0;
width: 100%;
text-align: center;
}
.CSSgal .bullets>a {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background: #f8d000;
border: 2px solid #f8d000;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.CSSgal .bullets a span {
display: none;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.CSSgal .bullets>a+a {
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid #999;
/* Dim all but first */
}
.CSSgal .bullets>a:hover {
background: #f8d000;
border: 2px solid #f8d000;
}
/* NAVIGATION BUTTONS */
/* ALL: */
.CSSgal>s:target~.bullets>* {
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid #999;
}
/* ACTIVE */
#s1:target~.bullets>*:nth-child(1) {
background: #f8d000;
border: 2px solid #f8d000;
}
#s2:target~.bullets>*:nth-child(2) {
background: #f8d000;
border: 2px solid #f8d000;
}
#s3:target~.bullets>*:nth-child(3) {
background: #f8d000;
border: 2px solid #f8d000;
}
/* More slides? Add here more rules */
/* PREV/NEXT CONTAINERS VISIBILITY */
/* ALL: */
.CSSgal>s:target~.prevNext>* {
visibility: hidden;
}
/* ACTIVE: */
#s1:target~.prevNext>*:nth-child(1) {
visibility: visible;
}
#s2:target~.prevNext>*:nth-child(2) {
visibility: visible;
}
#s3:target~.prevNext>*:nth-child(3) {
visibility: visible;
}
/* More slides? Add here more rules */
/* SLIDER ANIMATION POSITIONS */
#s1:target~.slider {
transform: translateX(0%);
-webkit-transform: translateX(0%);
}
#s2:target~.slider {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
#s3:target~.slider {
transform: translateX(-200%);
-webkit-transform: translateX(-200%);
}
<div class="wrapper">
<section class="extra-space">
<h1>Extra space</h1>
</section>
<section class="mb-4">
<div class="container-fluid">
<div class="row">
<div class="col-12 p-0">
<div class="CSSgal">
<!-- Don't wrap targets in parent -->
<s id="s1"></s>
<s id="s2"></s>
<s id="s3"></s>
<div class="slider">
<div>
<a href="/en-ae/brands/troop-london/">
<img src="https://dummyimage.com/600x400/000/fff">
</a>
</div>
<div>
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div>
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
<div class="prevNext">
<div>
<a class="left" href="#s3"></a>
<a class="right" href="#s2"></a>
</div>
<div>
<a class="left" href="#s1"></a>
<a class="right" href="#s3"></a>
</div>
<div>
<a class="left" href="#s2"></a>
<a class="right" href="#s1"></a>
</div>
</div>
<div class="bullets">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
</div>
</div>
</div>
</section>
</div>

i manage to fix this by add s{display: none;} which hiding the id.
/*** the solution ***/
s{
display: none;
}
.wrapper {
overflow:scroll;
height:700px;
}
/* For visual purpose only */
.extra-space {
width: 100%;
height: 300px;
background: red;
line-height: 300px;
text-align: center;
}
/*slider*/
.CSSgal {
position: relative;
overflow: hidden;
/* Or set a fixed height */
}
/* SLIDER */
.CSSgal .slider {
height: 100%;
white-space: nowrap;
font-size: 0;
transition: 0.8s;
}
/* SLIDES */
.CSSgal .slider>* {
display: inline-block;
white-space: normal;
vertical-align: top;
height: 100%;
width: 100%;
background: none 50% no-repeat;
background-size: cover;
}
/* PREV/NEXT, CONTAINERS & ANCHORS */
.CSSgal .prevNext {
position: absolute;
z-index: 1;
top: 50%;
width: 100%;
height: 0;
}
.CSSgal .prevNext>div+div {
visibility: hidden;
/* Hide all but first P/N container */
}
.CSSgal .prevNext a {
text-align: center;
opacity: 0.7;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 0;
position: absolute;
width: 30px;
height: 30px;
display: inline-block;
padding: 3px;
}
.CSSgal .prevNext .right {
right: 30px;
left: auto;
position: absolute;
top: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: hsla(0, 0%, 92.2%, .6) !important;
z-index: 1;
cursor: pointer;
background-image: none !important;
transition: all .3s;
}
.CSSgal .prevNext .left {
left: 30px;
position: absolute;
top: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
background-image: none !important;
background-color: hsla(0, 0%, 92.2%, .6) !important;
z-index: 1;
cursor: pointer;
transition: all .3s;
}
.CSSgal .prevNext .left:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: url(https://new.brandsforless.ae/static/media/m-sprite.7b312d28.png) no-repeat;
background-size: 300px;
display: inline-block;
background-position: -76.5px -7px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.CSSgal .prevNext .right:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: url(https://new.brandsforless.ae/static/media/m-sprite.7b312d28.png) no-repeat;
background-size: 300px;
display: inline-block;
background-position: -49px -7.5px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.CSSgal .prevNext a:hover {
background-color: #ebebeb!important;
}
.CSSgal .prevNext a+a {
left: auto;
right: 0;
}
/* NAVIGATION */
.CSSgal .bullets {
position: absolute;
z-index: 2;
bottom: 0;
padding: 10px 0;
width: 100%;
text-align: center;
}
.CSSgal .bullets>a {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background: #f8d000;
border: 2px solid #f8d000;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.CSSgal .bullets a span {
display: none;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.CSSgal .bullets>a+a {
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid #999;
/* Dim all but first */
}
.CSSgal .bullets>a:hover {
background: #f8d000;
border: 2px solid #f8d000;
}
/* NAVIGATION BUTTONS */
/* ALL: */
.CSSgal>s:target~.bullets>* {
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid #999;
}
/* ACTIVE */
#s1:target~.bullets>*:nth-child(1) {
background: #f8d000;
border: 2px solid #f8d000;
}
#s2:target~.bullets>*:nth-child(2) {
background: #f8d000;
border: 2px solid #f8d000;
}
#s3:target~.bullets>*:nth-child(3) {
background: #f8d000;
border: 2px solid #f8d000;
}
/* More slides? Add here more rules */
/* PREV/NEXT CONTAINERS VISIBILITY */
/* ALL: */
.CSSgal>s:target~.prevNext>* {
visibility: hidden;
}
/* ACTIVE: */
#s1:target~.prevNext>*:nth-child(1) {
visibility: visible;
}
#s2:target~.prevNext>*:nth-child(2) {
visibility: visible;
}
#s3:target~.prevNext>*:nth-child(3) {
visibility: visible;
}
/* More slides? Add here more rules */
/* SLIDER ANIMATION POSITIONS */
#s1:target~.slider {
transform: translateX(0%);
-webkit-transform: translateX(0%);
}
#s2:target~.slider {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
#s3:target~.slider {
transform: translateX(-200%);
-webkit-transform: translateX(-200%);
}
<div class="wrapper">
<section class="extra-space">
<h1>Extra space</h1>
</section>
<section class="mb-4">
<div class="container-fluid">
<div class="row">
<div class="col-12 p-0">
<div class="CSSgal">
<!-- Don't wrap targets in parent -->
<s id="s1"></s>
<s id="s2"></s>
<s id="s3"></s>
<div class="slider">
<div>
<a href="/en-ae/brands/troop-london/">
<img src="https://dummyimage.com/600x400/000/fff">
</a>
</div>
<div>
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div>
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
<div class="prevNext">
<div>
<a class="left" href="#s3"></a>
<a class="right" href="#s2"></a>
</div>
<div>
<a class="left" href="#s1"></a>
<a class="right" href="#s3"></a>
</div>
<div>
<a class="left" href="#s2"></a>
<a class="right" href="#s1"></a>
</div>
</div>
<div class="bullets">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
</div>
</div>
</div>
</section>
</div>

Spinner with transparent background?

I have a spinner with a white background which is animated through a keyframe. So, having this code pen, how could I remove this color to "smt-spinner-inner-circle" class without affecting the original desing? If the background is removed, the portion is visible. I have tried to apply a clip but the result is not the expected.
http://codepen.io/anon/pen/WpagJN
Html:
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
<div class="smt-spinner-inner-circle"></div>
</div>
To sum up, I need the background of the spinner transparent, not red, since the website will be different backgrounds depending on the page you are (grey, white, etc)...

Why not do like this, which will be transparent on top of any backgrounds, images included
.test {
display: inline-block;
padding: 20px;
}
.test.red{
background: red;
}
.test.green{
background: green;
}
.test.image{
background: url(http://lorempixel.com/500/200/nature/1/);
}
.smt-spinner-circle {
width: 50px;
height: 50px;
position: relative;
margin: 20px;
border-radius: 50%;
}
.smt-spinner {
height: 100%;
width: 100%;
border-radius: 50%;
border-right: 2px solid rgba(255,255,255,0.6);
border-top: 2px solid blue;
border-left: 2px solid blue;
border-bottom: 2px solid blue;
animation: rotate--spinner 1.6s infinite;
}
#keyframes rotate--spinner {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
<div class="test red">
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
</div>
</div>
<div class="test green">
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
</div>
</div>
<div class="test image">
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
</div>
</div>

Your background-color hides triangle that rotates, so simply change background: white to match your background color.
body{
background: red;
}
.smt-spinner-circle {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: blue;
border-radius: 50%;
}
.smt-spinner-inner-circle {
width: 92%;
height: 92%;
background: red;
border-radius: 50%;
margin: auto;
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.smt-spinner {
height: 0;
width: 0;
border-radius: 50%;
border-right: 25px solid rgba(255,255,255,0.6);
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-bottom: 25px solid transparent;
animation: rotate--spinner 1.6s infinite;
}
#keyframes rotate--spinner {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
<div class="smt-spinner-inner-circle"></div>
</div>

You could create a simple spinner with only one element and different border styles.
.loader{
border: 2px solid #CECECE;
border-top-color: #14B48C;
width: 40px;
height: 40px;
border-radius: 50%;
animation: spin 1s infinite;
}
#keyframes spin{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}

CSS Code
#keyframes ldio-rpinwye8j0b {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.ldio-rpinwye8j0b div {
position: absolute;
animation: ldio-rpinwye8j0b 1s linear infinite;
width: 160px;
height: 160px;
top: 20px;
left: 20px;
border-radius: 50%;
box-shadow: 0 4px 0 0 #e15b64;
transform-origin: 80px 82px;
}
.loadingio-eclipse {
width: 200px;
height: 200px;
display: inline-block;
overflow: hidden;
}
.ldio-rpinwye8j0b {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.ldio-rpinwye8j0b div { box-sizing: content-box; }
<div
class="loadingio-eclipse">
<div class="ldio-rpinwye8j0b">
<div>
</div>
</div>
</div>

It can make a modal popup window with just HTML and CSS?

I would be interested to know if you can make a modal pop-up window just using HTML and CSS without JQuery.
Does anyone know such a simple example?
Thanks in advance!

A modal with only HTML and CSS no jQuery or javascript
body {
color: #333333;
font-family: 'Helvetica', arial;
height: 80em;
}
.wrap {
padding: 40px;
text-align: center;
}
hr {
clear: both;
margin-top: 40px;
margin-bottom: 40px;
border: 0;
border-top: 1px solid #aaaaaa;
}
h1 {
font-size: 30px;
margin-bottom: 40px;
}
p {
margin-bottom: 20px;
}
.btn {
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
/* top: 40em;*/
}
.btn:hover {
background: #357ebd;
}
.btn.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaaaaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
.modal:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:target:before {
display: block;
}
.modal:target .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
top: 20%;
}
.modal-dialog {
background: #fefefe;
border: #333333 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left: 50%;
top: -100%;
z-index: 11;
width: 360px;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal-body {
padding: 20px;
}
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
border-bottom: #eeeeee solid 1px;
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
border-top: #eeeeee solid 1px;
text-align: right;
}
/*ADDED TO STOP SCROLLING TO TOP*/
#close {
display: none;
}
<div class="wrap">
<h1>Modal - Pure CSS (no Javascript)</h1>
<hr />
Modal!
</div>
<!-- Modal -->
<div class="modal" id="modal-one" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<h2>Modal in CSS?</h2>
× <!--CHANGED TO "#close"-->
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="modal-footer">
Nice! <!--CHANGED TO "#close"-->
</div>
</div>
</div>
</div>
<!-- /Modal -->

Yes, it is possible.
You can use the :target pseudo selector to show a modal.
Here's an example including some transitions as well (code combined from shehary's codepen example and http://tympanus.net/Development/ModalWindowEffects):
body {
background-color: #e74c3c;
}
a {
background-color: #c0392b;
color: #fff;
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
text-decoration: none;
border-radius: 2px;
}
a:hover {
background-color: #a5281b;
}
body > a {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
}
.md-modal:target {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(143,27,15,0.8);
transition: all 0.3s;
}
.md-modal:target ~ .md-overlay {
opacity: 1;
visibility: visible;
}
/* Content styles */
.md-content {
color: #fff;
background: #e74c3c;
position: relative;
border-radius: 3px;
margin: 0 auto;
}
.md-content h3 {
margin: 0;
padding: 0.4em;
text-align: center;
font-size: 2.4em;
font-weight: 300;
opacity: 0.8;
background: rgba(0,0,0,0.1);
border-radius: 3px 3px 0 0;
}
.md-content > div {
padding: 15px 40px 30px;
margin: 0;
font-weight: 300;
font-size: 1.15em;
}
.md-content > div p {
margin: 0;
padding: 10px 0;
}
.md-content > div ul {
margin: 0;
padding: 0 0 30px 20px;
}
.md-content > div ul li {
padding: 5px 0;
}
.md-content a {
display: block;
margin: 0 auto;
font-size: 0.8em;
}
/* Effect */
.md-modal .md-content {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.md-modal:target .md-content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
MODAL
<div class="md-modal" id="modal">
<div class="md-content">
<h3>Modal Dialog</h3>
<div>
<p>This is a modal window.</p>
<a class="md-close" href="#">Close me!</a>
</div>
</div>
</div>
<div class="md-overlay"></div>
If you don't feel comfortable using visibility: hidden you can use display: none instead. But you better remove the transitions in that case (visibility can be used in a transition, display can't).