Making off-canvas sliding menu with css

Making off-canvas sliding menu with css - html

I want to make a sliding menu using solely CSS. The menu will reveal a list of items and a close button inside it. I currently have an anchor tag on my homepage that is styled correctly, but it does not do anything when clicked.
HTML:
<body class="homepage body-push">
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Focus</h1>
<i class="icon-remove menu-close"></i>
Home
Services
Process
Portfolio
About
Contact
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelope"></i>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
</body>
CSS:
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
UPDATE: I finally found a way to get it working.
HTML:
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Menu</h1>
<i class="icon-remove menu-close"></i>
Home
Services
Process
Portfolio
About
Contact
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelope"></i>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
CSS:
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu h1.logo a {
font-family: 'Raleway', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.15em;
line-height: 40px;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
}
.menu h1.logo a:hover {
color: #f85c37;
}
.menu img.logo {
margin: 20px 0;
max-width: 160px;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
Javascript:
// Menu settings
$('#menuToggle, .menu-close').on('click', function(){
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toleft');
$('#theMenu').toggleClass('menu-open');
});
// Scrollable menu on small devices
$(window).bind("load resize", function(){
if($(window).height() < 400){
$(".menu").css("overflow-y","scroll");
}
else {
$(".menu").css("overflow-y","hidden");
}
});

I would recommend reading this: http://www.sitepoint.com/css3-sliding-menu/
If the article is TL;DR then use
/* Revealing 3D Menu CSS */
body
{
font-family: sans-serif;
font-size: 100%;
padding: 0;
margin: 0;
color: #333;
background-color: #221;
}
/* main page */
article
{
position: fixed;
width: 70%;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 30px 15%;
background-color: #fff;
overflow: auto;
z-index: 0;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
}
article:after
{
position: absolute;
content: ' ';
left: 100%;
top: 0;
right: 0;
bottom: 0;
background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
pointer-events: none;
}
/* navigation */
nav
{
position: fixed;
left: -16em;
top: 0;
bottom: 0;
background-color: #654;
border-right: 50px solid #765;
box-shadow: 4px 0 5px rgba(0,0,0,0.2);
z-index: 1;
cursor: pointer;
}
nav:after
{
position: absolute;
content: ' ';
width: 0;
height: 0;
right: -70px;
top: 50%;
border-width: 15px 10px;
border-style: solid;
border-color: transparent transparent transparent #765;
}
nav ul
{
width: 14em;
list-style-type: none;
margin: 0;
padding: 1em;
}
nav a:link, nav a:visited
{
display: block;
width: 100%;
font-weight: bold;
line-height: 2.5em;
text-indent: 10px;
text-decoration: none;
color: #ffc;
border-radius: 4px;
outline: 0 none;
}
nav a:hover, nav a:focus
{
color: #fff;
background-color: #543;
text-shadow: 0 0 4px #fff;
box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
}
/* hovering */
article, article:after, nav, nav *
{
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
nav:hover
{
left: 0;
}
nav:hover ~ article
{
-webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
-moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
-ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
-o-transform: translateX(16em) perspective(600px) rotateY(10deg);
transform: translateX(16em) perspective(600px) rotateY(10deg);
}
nav:hover ~ article:after
{
left: 60%;
}
This can be used to create a 3d sliding menu as seen here

Related

Checkbox ON/OFF switch in Safari and IE/Edge

In Chrome, firefox, opera, brave ia ok, in Safari - transition no good.
In Edge, Internet Esplorer - apprearance not work, looks like the checkbox
How to repear safari's transition and apprearance in Edge/IE browsers?
.mytoggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:checked {
background-color: #2A3542;
}
input.mytoggle:focus {
outline: 0;
}
.mytoggle:checked:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" checked="checked" class="mytoggle" style="" />

Styling a checkbox directly is a pain, you could use the checkbox + label hack, in which you link a label to a checkbox, and apply the styles to the label instead of the checkbox itself:
.mytoggle {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
.mytoggle + label {
font-family: arial;
vertical-align: middle;
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle + label:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:checked + label {
background-color: #2A3542;
}
input.mytoggle:focus + label {
outline: 0;
}
.mytoggle:checked + label:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" checked="checked" class="mytoggle" id="mycheckbox" />
<label for="mycheckbox" />

input { opacity:0}
input+label {
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
input+label:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
input:checked+label{
background-color: #2A3542;
}
input.mytoggle:focus {
outline: 0;
}
input:checked+label:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" name="abc" id="abc" checked="checked" style="" />
<label for="abc" class="mytoggle"></label>
I just added a label for input checkbox, tested in internet explorer 11. I don't have have safari browser to test it, So you can test and let know, if this answer meets your requirement.

Please try this.
$(document).ready(function(e) {
$(".ra-box").click(function(){
$(this).toggleClass('checked');
});
});
input[type=checkbox] { opacity: 0; }
.ra-box {
display: inline-block;
margin: 0;
padding: 6px;
cursor: pointer;
border-radius: 15px;
overflow: hidden;
background: #2a3542;
width: 70px;
height: 18px;
position: relative;
}
.ra-box:before {
height: 20px;
width: 20px;
background: #41cac0;
color: #41cac0;
content: 'ON';
text-indent: -40px;
position: absolute;
top: 5px;
right: 5px;
border-radius: 50%;
}
.ra-box:after {
height: 20px;
width: 20px;
background: #7f8c9a;
color: #fff;
content: 'OFF';
position: absolute;
top: 5px;
border-radius: 50%;
text-indent: 30px;
left: 85px;
}
/* Check Box Check Change background color */
.ra-box.checked:before { right: 85px; }
.ra-box.checked:after { left: 5px;}
.ra-box.checked { background: #bdc3c7; }
.ra-box,.checked,.ra-box.checked,.ra-box:before,.ra-box:after,.ra-box.checked:before,.ra-box.checked:after {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ra-box">
<input type="checkbox" id="toggle-1">
</div>
<br>
<br>
<div class="ra-box">
<input type="checkbox" id="toggle-1">
</div>

Text over image css with overlay effect

I tried to put some contents over an image with some overlay effects, but it does not shows output as my needs. Also I don't know how to do overlay effects anyone can help me please.
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.destinationmask {
width: 100%;
height: 100%;
z-index: 5;
opacity: 0.4;
filter: alpha(opacity=50);
background: #000;
}
<img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/>
<a href="" class="overlay-leftTop">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
</div>
</div>
</div>
Actually I need something like this

You should use background-image CSS property instead of <img> tag. And for effects use pseudo elements like :before.
Have a look at the snippet below:
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
display: block;
position: relative;
text-decoration: none;
width: 300px;
height: 300px;
z-index: 9;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background: rgba(0,0,0,0.3);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:hover {
text-decoration: none;
}
.overlay-leftTop:hover:before {
background: rgba(0,0,0,0.5);
}
.destinationmask {
width: 100%;
height: 100%;
z-index: 5;
opacity: 0.4;
filter: alpha(opacity=50);
background: #000;
}
<a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
</div>
</div>
</div>
</a>
Hope this helps!

I think this is what u want.
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
display: block;
position: relative;
text-decoration: none;
width: 300px;
height: 300px;
z-index: 9;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background: rgba(0,0,0,0.3);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.overlay-leftTop:hover {
text-decoration: none;
}
.overlay-leftTop:hover:before {
background: rgba(0,0,0,0.5);
}
.destinationmask {
width: 100%;
height: 100%;
z-index: 5;
opacity: 0.4;
filter: alpha(opacity=50);
background: #000;
}
.view-btn{
position: absolute;
top: 180px;
font-size: 16px !important;
border: 2px solid #fff;
display: inline-block !important;
text-align: center;
padding: 10px 15px;
opacity: 0;
transition:all 350ms ease 0s;
}
.overlay-leftTop:hover .view-btn{
opacity:1;
}
<a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
<span class="view-btn">View More</Span>
</div>
</div>
</div>
</a>

Please try this. I have added some css:
.img-wrap {
display: inline-block;
position: relative;
width: 386px;
}
.img-box:before {
position: absolute;
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
transform:scale(0);
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.img-wrap:hover .img-box:before {
transform:scale(1);
}
.img-wrap:hover .overlay-leftTop{
opacity:1;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
display: block;
}
.destination {
padding: 20px;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.destination h3 {
font-size: 25px;
color: #fff;
line-height: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.destination span {
display: block;
font-size: 15px;
color: #fff;
line-height: 16px;
}
.overlay-leftTop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity:0;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.img-wrap {
display: inline-block;
position: relative;
width: 386px;
}
.img-box:before {
position: absolute;
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
transform:scale(0);
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.img-wrap:hover .img-box:before {
transform:scale(1);
}
.img-wrap:hover .overlay-leftTop{
opacity:1;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
display: block;
}
<div class="img-wrap">
<div class="img-box">
<img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/>
</div>
<a href="" class="overlay-leftTop">
<div class="table-display">
<div class="table-cell table-cell-bottom">
<div class="destination">
<h3>TEST</h3>
<span>Check,check1,check2</span>
</div>
</div>
</div>
</a>
</div>

Transition without moving background (CSS and HTML)

I'm still new in coding, so you'll see some unnecessary codes in the css..
My problem is, I want to make the background stays/static when hovered, I believe my hover style is called "slide".. But when I hover on, the background did hover too. So, I need a help on how to make the background static when hovered.
p/s: please remain the margin for avpb :)
CSS:
#avpb {
background: rgba(0, 0, 0, 0.6);
width: 160px;
height: 220px;
border: 1px solid #000000;
padding: 19.5px;
margin-top: -10px;
margin-left: 555px;
position: absolute;
}
#avp {
position: absolute;
width: 160px;
height: 220px;
}
#avp img {
position: absolute;
z-index: 0;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
-ms-transition:all .3s ease-out;
-o-transition:all .3s ease-out;
transition:all .3s ease-out;
}
#avp:hover > .overlay {
opacity: 1;
width: 160px;
height: 220px
height:auto;
background: rgba(0, 0, 0, 0.6);
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,10px);
-ms-transform:translate(0px,10px);
-o-transform:translate(0px,10px);
transform:translate(0px,10px);
}
.button {
width: 160px;
height: 220px;
position: absolute;
}
.button a {
font-family: Lato;
font-size: 10px;
letter-spacing: 1px;
width: 80px;
height: 25px;
line-height: 25px;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.6);
border: 1px solid #000000;
text-align: center;
text-decoration: none;
padding: 5px;
color: #ffffff !important;
display: block;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
.button a:hover {
background: rgba(0, 0, 0, 0.6);
border: 1px solid #4cd1db;
color: #4cd1db !important;
text-decoration: none;
letter-spacing: 2px;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
HTML:
<div id="avpb">
<div id="avp">
<img src="http://www.imvu.com/catalog/web_av_pic.php?u=87116145">
<div class="overlay">
<div class="button">
<br>
<br>
add
<br>
message
</div>
</div>
</div>
</div>
Here's a JSFiddle

You should just let the .button transform then. I added some styles to your css file, hard to explain, just try and compare it with your original code :).
#avpb {
background: rgba(0, 0, 0, 0.6);
width: 160px;
height: 220px;
border: 1px solid #000000;
padding: 19.5px;
margin-top: -10px;
margin-left: 555px;
position: absolute;
}
#avp {
position: absolute;
width: 160px;
height: 220px;
}
#avp img {
position: absolute;
z-index: 0;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.button{
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#avp:hover>.overlay {
opacity: 1;
width: 160px;
height: 220px height:auto;
background: rgba(0, 0, 0, 0.6);
}
#avp:hover>.overlay>.button {
opacity: 1;
width: 160px;
height: 220px height:auto;
-webkit-transform: translate(0px, 10px);
-moz-transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
-o-transform: translate(0px, 10px);
transform: translate(0px, 10px);
}
.button {
width: 160px;
height: 220px;
position: absolute;
}
.button a {
font-family: Lato;
font-size: 10px;
letter-spacing: 1px;
width: 80px;
height: 25px;
line-height: 25px;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.6);
border: 1px solid #000000;
text-align: center;
text-decoration: none;
padding: 5px;
color: #ffffff !important;
display: block;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
.button a:hover {
background: rgba(0, 0, 0, 0.6);
border: 1px solid #4cd1db;
color: #4cd1db !important;
text-decoration: none;
letter-spacing: 2px;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
<div id="avpb">
<div id="avp">
<img src="http://www.imvu.com/catalog/web_av_pic.php?u=87116145">
<div class="overlay">
<div class="button">
<br>
<br>
add
<br>
message
</div>
</div>
</div>
</div>

You are transforming/translating the div to be 10 pixels down:
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,10px);
-ms-transform:translate(0px,10px);
-o-transform:translate(0px,10px);
transform:translate(0px,10px);
Delete these and it should work fine.

Transition according to caption width

I'm building an image overlay from right to left transition. The transition is working fine but the caption is 45% width of the image and I want the transition to stop at the end of caption width not continue till the end of image width.
This is my code
.screenshot {
float: left;
margin: 50px;
position: relative;
overflow: hidden;
}
.screenshot > * {
display: block;
}
.screenshot h3 {
margin: 8px;
padding: 0;
text-indent: 0;
text-align: right;
font: 21px/25px "TwCenMT";
text-transform: none;
text-decoration: none;
color: #fff;
letter-spacing: normal;
}
.screenshot-caption {
position: absolute;
width: 45%;
height: 100%;
background: rgb(93, 84, 77);
background: rgba(93, 84, 77, .7);
color: #ed4e6e;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.screenshot-caption h1 {
color: #fff;
}
.screenshot-caption a {
display: table;
margin: 0 auto;
bottom:0;
text-align: center;
background: #2c3e50;
padding: 6px 12px;
color: #000;
text-decoration: none;
}
.screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 0;
}
.screenshot-caption_right {
top: 0;
left: 100%;
}
.screenshot:hover .screenshot-caption {
top: 0;
left: 0;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.screenshot:hover .screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 1;
}
<div class="screenshot">
<img src="http://fillmurray.com/300/200">
<div class="screenshot-caption screenshot-caption_right">
<h1>Right to Left</h1>
Read More
</div>
</div>
http://jsfiddle.net/vhp2nL7k/
The transition should be 45% of the image according to caption width

As you want the transition to stop the end of caption, the absolute position of the caption at that time would be left = 100-(width of caption div)% = 55% in this case.
.screenshot {
float: left;
margin: 50px;
position: relative;
overflow: hidden;
}
.screenshot > * {
display: block;
}
.screenshot h3 {
margin: 8px;
padding: 0;
text-indent: 0;
text-align: right;
font: 21px/25px "TwCenMT";
text-transform: none;
text-decoration: none;
color: #fff;
letter-spacing: normal;
}
.screenshot-caption {
position: absolute;
width: 45%;
height: 100%;
background: rgb(93, 84, 77);
background: rgba(93, 84, 77, .7);
color: #ed4e6e;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.screenshot-caption h1 {
color: #fff;
}
.screenshot-caption a {
display: table;
margin: 0 auto;
bottom:0;
text-align: center;
background: #2c3e50;
padding: 6px 12px;
color: #000;
text-decoration: none;
}
.screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 0;
}
.screenshot-caption_right {
top: 0;
left: 100%;
}
.screenshot:hover .screenshot-caption {
top: 0;
left: 55%;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.screenshot:hover .screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 1;
}
<div class="screenshot">
<img src="http://fillmurray.com/300/200">
<div class="screenshot-caption screenshot-caption_right">
<h1>Right to Left</h1>
Read More
</div>
</div>

:after in Internet Explorer isn't working

The arrows before the title are displayed using a :before. The problem only occur on Internet Explorer.
// edit : Mistake there, my styling is on p a.
Maybe is it the issue ?
So, here's the code:
.special-title {
font-size: 24px;
color: #a4a19e;
line-height: 1.2;
position: relative;
padding: 8px 0 8px 38px;
border-top: 1px solid #e2dbcf;
border-bottom: 1px solid #e2dbcf;
margin-top: 49px;
margin-bottom: 25px; }
.special-title:before {
content: url('../img/general-title-decoration.svg?1369571463');
position: absolute;
width: 28px;
left: 0;
top: 23px;
margin-top: -13px; }
and for the button:
.btn-call-to-action a {
background: #8e8287;
color: #f5f3e2;
padding: 2px 60px 2px 10px;
height: 35px;
line-height: 40px;
margin-top: 6px;
display: inline-block;
position: relative;
border-radius: 2px;
height: 40px;
white-space: nowrap;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
.btn-call-to-action a:hover:after {
-webkit-transform: translatex(6px);
-moz-transform: translatex(6px);
-o-transform: translatex(6px);
-ms-transform: translatex(6px);
transform: translatex(6px); }
.btn-call-to-action a:hover {
background: #6f6469;
border-bottom: none; }
.btn-call-to-action a:after {
content: url('../img/general-white-arrow.svg?1369574895');
position: absolute;
width: 35px;
right: 15px;
top: 0px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
and here's the live site: http://aurelieremia.be/tfa/

In .special-title:before, since you're using absolute positioning, remove
margin-top:-13px;
and just use
top:10px;
instead. Then, declare a height as well as a width.
see http://jsfiddle.net/6TdB6/

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Making off-canvas sliding menu with css - html

Related

Checkbox ON/OFF switch in Safari and IE/Edge

Text over image css with overlay effect

Transition without moving background (CSS and HTML)

Transition according to caption width

:after in Internet Explorer isn't working

Categories

Resources