Building a portfolio page with images and trying to use jquery to make the caption show and slide up on hover but then, when i tried, it didn't work with my code. The code is shown below plus a snippet that can also be run.
Here's a Snippet
$('.port-img').hover(function() {
if ($(".caption").is('hidden')) {
$(this).show('slideUp', 'slow');
$(this).hide('slideDown', 'slow');
};
});
.caption {
width: 400px;
height: auto;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
background: #000;
color: #fff;
z-index: 2;
transition: all .5s;
visibility: hidden;
}
.image {
width: 400px;
height: 400px;
z-index: 1;
transition: all .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
<div class="port-img image">
<img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" />
</div>
<div class="caption img-caption">
<h3>Logo Design, Photoshop</h3>
</div>
</div>
You can do it with alternative way, using CSS only :
.caption-style-2{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.caption-style-2 li{
float: left;
padding: 0px;
position: relative;
overflow: hidden;
}
.caption-style-2 li:hover .caption{
opacity: 1;
transform: translateY(-100px);
-webkit-transform:translateY(-100px);
-moz-transform:translateY(-100px);
-ms-transform:translateY(-100px);
-o-transform:translateY(-100px);
}
.caption-style-2 img{
margin: 0px;
padding: 0px;
float: left;
z-index: 4;
}
.caption-style-2 .caption{
cursor: pointer;
position: absolute;
opacity: 0;
top:300px;
-webkit-transition:all 0.15s ease-in-out;
-moz-transition:all 0.15s ease-in-out;
-o-transition:all 0.15s ease-in-out;
-ms-transition:all 0.15s ease-in-out;
transition:all 0.15s ease-in-out;
}
.caption-style-2 .blur{
background-color: rgba(0,0,0,0.7);
height: 300px;
width: 400px;
z-index: 5;
position: absolute;
}
.caption-style-2 .caption-text h1{
text-transform: uppercase;
font-size: 18px;
}
.caption-style-2 .caption-text{
z-index: 10;
color: #fff;
position: absolute;
width: 300px;
height: 300px;
text-align: center;
top:20px;
}
<ul class="caption-style-2">
<li>
<img src="http://via.placeholder.com/300x300" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Amazing Caption</h1>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</li>
</ul>
$('.port-img').hover(function(){
$(".caption").show('slideUp');
$(".caption").hide('slideDown');
});
.caption {
width: 400px;
height: auto;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
background: #000;
color: #fff;
z-index: 2;
transition: all .5s;
display: none;
}
.image {
width: 400px;
height: 400px;
z-index: 1;
transition: all .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
<div class="port-img image">
<img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" />
</div>
<div class="caption img-caption">
<h3>Logo Design, Photoshop</h3>
</div>
</div>
$(this) means $('.port-img') not ('.caption')
Please have a look at snippet.
$('.port-img').hover(function(){
var $caption = $(".caption");
if ($caption.is(':hidden')){
$caption.slideDown('slow');
} else {
$caption.slideUp('slow');
}
});
.caption {
width: 400px;
height: auto;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
background: #000;
color: #fff;
z-index: 2;
transition: all .5s;
display: none; /* default hide */
}
.image {
width: 400px;
height: 400px;
z-index: 1;
transition: all .5s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
<div class="port-img image">
<img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" />
</div>
<div class="caption img-caption">
<h3>Logo Design, Photoshop</h3>
</div>
</div>
Related
Below is the code I've been using to create a website. I'm in the process of getting it online but I am having trouble accessing it on a mobile device using the mobile network. No problems viewing the website using wi-fi, but on a mobile device the site will crash and none of the links will work.
On some web pages, I have a large number of photographs. Could this issue be solved via lazy loading of the photos on the page? Is there any script in the CSS or Javascript that's making the website difficult to use on a mobile device? Any knowledge about trying to solve this issue would be much appreciated.
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
<body>
<style>html{visibility: hidden; opacity: 0;}</style>
<title>MORIKOBOSHI・</title>
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">Home</li>
<li style="border-bottom: .05px solid lightgray;">Blog</li>
<li style="border-bottom: .05px solid lightgray;">About This Website</li>
<li style="border-bottom: .05px solid lightgray;">Bibliography</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
<input class="search2" id="txtSearch" type="text" placeholder="Custom Google Search" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
<input class="search1" type="submit" name="submition" value="Search" style="padding-left: 5px; top: 153px; height: 25px; width: 50px; display: inline-flex; justify-content: center;">
<input class="search2" type="hidden" name="sitesearch" value="default.html">
</form>
</div>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:morikoboshi.com' + document.getElementById('txtSearch').value;
return false;
}
</script>
<script>
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>
</ul>
</nav>
</header>
<div class="setsumei">
<br><br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
<br><p style="text-align: justify; font-size: 16px;"></p>
<p style="text-align: center; font-size: 13px;">Author: ◯◯◯◯</p>
<p style="text-align: center; font-size: 13px;">Photos/Videos Taken：◯◯◯◯/◯◯/◯◯</p>
<br><br><p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br><br><div class="image">
<img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI© | 日本語</footer>
</div>
</div>
<style>
html {visibility: visible;
opacity: 1;}
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
I have a problem with the Lightbox2 made by Lokesh.
https://lokeshdhakar.com/projects/lightbox2/
I am v2.11.3 and the display of horizontal photo is on the top of the screen in mobiles devices. I have try different options but doesn't work.
Another problem es the order the photos are displaying by Lightbox, I am using Colcate for horizontal grid, so the image follow left to right order but the Lightbox show me the photos follow the vertical order top to bottom, I don't know how I can fix it.
(https://user-images.githubusercontent.com/73562012/108930646-68c95c00-769a-11eb-9c71-ec83b816f2da.png)
leave you part of my code,
the file lightbox-plus-jquery.min.js you que find in the lokesh's page
thanks!
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<div class="container gallery">
<div class="grid">
<!-- current -->
<div class="grid-col grid-col--1">
</div>
<div class="grid-col grid-col--2">
</div>
<div class="grid-col grid-col--3">
</div>
<div class="grid-col grid-col--4">
</div>
<div class="grid-col grid-col--5">
</div>
<div class="grid-item">
<a href="images/urban//urban7-david-porter.jpg"
data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban7-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
<div class="grid-item">
<a href="images/urban/urban00-david-porter.jpg" data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban00-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
<div class="grid-item">
<a href="images/urban/urban10-david-porter.jpg" data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban10-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
</div>
</div>
<!-- colcate- grid -->
<script src="https://unpkg.com/colcade#0/colcade.js"></script>
<script>
var colc = new Colcade( '.grid', {
columns: '.grid-col',
items: '.grid-item'
});
</script>
<!-- lightbox -->
<script src="js/lightbox-plus-jquery.min.js"></script>
<script src="js/lightbox.js"></script>
<script>
lightbox.option({
resizeDuration: 200,
wrapAround: true,
fadeDuration: 2000,
fitImagesInViewport: true,
wrapAround: true,
});
</script>
my css
body.lb-disable-scrolling {
overflow: hidden;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
outline: none;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #EDE7E5;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.2em;
}
.lb-data .lb-caption {
font-size: 1rem;
font-weight:;
line-height: 1em;
}
.lb-data .lb-caption a {
color: #424242;
}
.lb-data .lb-number {
display: block;
text-align: left;
width: 100% !important;
padding-bottom: 1em;
font-size: 12px;
color: #C7C2C0;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
I'm trying to create a webpage for my future portfolio
Here is my link for latecode-hub and here is my code:
#font-face{
font-family: 'Antic-Slab';
src: url('AnticSlab-Regular.ttf');
}
.navigation{
position: fixed;
top: 0;
right: 0;
z-index: 1;
}
.navigation #chbox{
position: absolute;
top: 0;
right: 0;
height: 50px;
width: 50px;
z-index: 2;
cursor: pointer;
opacity: 0;
}
.wrapper .hamburger{
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
}
.wrapper .hamburger >div{
z-index: 1;
position: relative;
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all 0.4s ease;
}
.wrapper .hamburger .div1{
top: 0px;
}
.wrapper .hamburger .div2{
top: 10px;
}
.wrapper .hamburger .div3{
top: 20px;
}
.navigation #chbox:checked + .wrapper .hamburger >.div1{
transform: rotate(-28deg);
width: 90%;
height: 3px;
border-radius: 1px;
}
.navigation #chbox:checked + .wrapper .hamburger >.div2{
transform: rotate(90deg) translateY(-25px) ;
width: 90%;
height: 3px;
border-radius: 1px;
}
.navigation #chbox:checked + .wrapper .hamburger >.div3{
transform: rotate(28deg);
width: 90%;
height: 3px;
border-radius: 1px;
}
.wrapper #menu{
display: flex;
overflow: hidden;
width: 0;
text-decoration: none;
text-align: center;
justify-items: center;
margin-right: 100px;
background-color: blueviolet;
transition: 0.5 ease;
height: 0;
}
.wrapper #menu a{
text-decoration: none;
list-style: none;
margin-left: 1em;
font-size: 25px;
font-family: Antic-Slab;
}
.navigation #chbox:checked .wrapper #menu:hover{
width: 100%;
height: 100%;
}
#import 'firefly.css';
#font-face{
font-family: 'Antic-Slab';
src: url('AnticSlab-Regular.ttf');
}
body{
background-color: rgba(124, 110, 204, 0.376);
margin: 0;
}
.box1{
order: 1;
height: 100vh;
display: grid;
grid-template-rows: 10% 60% 15% 15%;
border: 1px black solid;
grid-gap: 10px;
background: linear-gradient(to bottom right, rgb(26,28,32) 0%, rgb(49,54,66) 100%);
background-size: 210vh 200vh;
}
.main-word{
font-size: 50px;
padding-left: 25%;
padding-top: 10%;
color :rgb(230,219,200);
font-family: Antic-Slab;
cursor:default;
}
.main-word >#main1{
text-align: left;
animation-name: main;
animation-duration: 2s;
}
.main-word >#main2{
animation-name: main;
animation-duration: 4s;
}
#main2>span{
color:rgb(144, 132, 189) ;
}
.main-word >#main3{
animation-name: main;
animation-duration: 6s;
}
#keyframes main{
0% {
opacity: 0;
}
20%{
opacity: 0.2;
filter: blur(8px);
}
40%{
opacity: 0.4;
filter: blur(6px);
}
60% {
opacity: 0.6;
filter: blur(4px);
}
80%{
opacity: 0.8;
filter: blur(2px);
}
100%{
opacity: 1;
}
}
.down_writing{
font-size: 30px;
text-align: center;
padding: 5%;
color: white;
}
.arrow_down{
width: 30px;
height: 30px;
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.arrow1{
text-align: center;
padding-bottom: 20px;
}
.box2{
z-index: 1;
}
.box3{
height: 200vh;
background-color: inherit;
}
.box4{
background-size: 210vh 200vh;
}
header{
background-color: rgba(70, 127, 165, 0.123);
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="personal portfolio webpage">
<link href="personal webpage.css" type="text/css" rel="stylesheet">
<link href="hamburger menu.css" type="text/css" rel="stylesheet">
<title>Latecoder</title>
</head>
<body>
<nav class="navigation">
<input type="checkbox" id="chbox" />
<div class="wrapper">
<div class="hamburger">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="box1">
<div class="main-word">
<div id="main1">Hello</div>
<div id="main2">I'm <span>Cagatay</span> </div>
<div id="main3">This is my webpage</div>
</div>
<div class=down_writing>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
</div>
<div class="arrow1"><i class="arrow_down"></i></div>
</div>
<div class="box2">
</div>
<div class="box3">
<div>
Yeah that one is me
</div>
<div><img src="" alt=""></div>
<div> Yeah thats me</div>
<div><img src="" alt=""></div>
</div>
<div class="box4"></div>
<footer>
</footer>
</body>
</html>
I want to add a hover coming from the right side when I click on the hamburger menu, background box going come from right to left and menu will appear with it, something like a mixing of this and this I can add javascript if it's necessary.
https://jsfiddle.net/kmdyuwt8/2/
You need to add an open class
.wrapper #menu.show {
width: 300px;
height: 100%;
transition: width 1s linear;
}
And toggle it on hover.
let elm = document.querySelector('.hamburger');
function toggleMenu() {
document.querySelector('#menu').classList.toggle('show');
}
elm.onmouseenter = toggleMenu;
elm.onmouseleave = toggleMenu;
Your current css has some behavioral bugs in it, so cleaning it up will fix the minor inconveniences.
I want a to create a transparent dark image overlay above image with text. with a nice transition on hover.
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
}
.title {
margin: 0 auto;
width: 60%;
display: block;
font-size: 1.25em;
color: #ccc;
text-align: center;
padding-top: 120px;
}
<div class="study1">
<div class="">
<a class="title" href="#">View Case Study</a>
</div>
</div>
the design I wanted is this:
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
position:relative;
z-index:1;
}
.study1:after{
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
z-index:-1;
}
.title {
margin: 0 auto;
width: 60%;
display: block;
font-size: 1.25em;
color: #ccc;
text-align: center;
padding-top: 120px;
}
.transparent-dark {
background: rgba(0, 0, 0, 0.5);
height:100%;
}
<div class="study1">
<div class="transparent-dark">
<a class="title" href="#">View Case Study</a>
</div>
</div>
See below. Using the :after pseudo code the background is set with opacity 0. On hover, the opacity is changing to 0.3 with a duration of 1 second.
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
position: relative;
}
.study1:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
transition: background 1s ease;
}
.study1:hover:after {
background: rgba(0, 0, 0, 0.3);
}
.title {
margin: 0 auto;
width: 60%;
display: block;
font-size: 1.25em;
color: #ccc;
text-align: center;
padding-top: 120px;
}
<div class="study1">
<div class="">
<a class="title" href="#">View Case Study</a>
</div>
</div>
Set the transparent dark image overlay using the class .wrapper mentioned in the js fiddle, set the position: relative to .study1 and position other elements accordingly.
Here is the js fiddle.
This may serve your purpose
.image {
position:relative;
width:200px;
height:200px;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content: attr(data-content);
color:#fff;
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
<div data-content="Here is some text added on hover via a content value of attr(data-content)" class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
for more details please go here https://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css
Use this code
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
position:relative;
z-index:1;
}
.study1:after{
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
z-index:-1;
-webkit-transform:scale(0);
transform:scale(0);
-webkit-transition:0.5s;
transition:0.5s
}
.study1:hover:after{
-webkit-transform:scale(1);
transform:scale(1);
}
.title {
margin: 0 auto;
width: 60%;
display: block;
font-size: 1.25em;
color: #ccc;
text-align: center;
padding-top: 120px;
}
<div class="study1">
<div class="">
<a class="title" href="#">View Case Study</a>
</div>
</div>
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
position: relative;
}
.action {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.4);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.study1:hover .action {
height: 100%;
}
.title {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="study1">
<div class="action">
<a class="title" href="#">View Case Study</a>
</div>
</div>
I think it may suites your requirement. A neat transition.
.container {
display: flex;
position: relative;
border: 1px solid: #ddd;
width: 300px;
height: 300px;
}
.overlay {
position: absolute;
left: 0;
padding: 20px;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(127, 127, 127, 0.6);
transition: all 0.3s ease;
}
.content {
width: 300px;
height: 300px;
background-image: url('http://mays.tamu.edu/citycentre/wp-content/uploads/sites/44/2015/07/pmbaclass.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.text {
font-size: 25px;
text-transform: uppercase;
color: #fff;
display: inline-flex;
justify-content: center;
text-align: center;
transition: all 0.8s ease;
}
.overlay:hover .text {
transform: scale(1.2, 1.2);
}
<div class="container">
<div class="overlay">
<span class="text">The World's finest developers</span>
</div>
<div class="content">
</div>
</div>
Here is a snippet according to your requirement.
It seems like CSS transition: translate() has a conflict with z-index and I can't create a fold effect for my block.
HTML
<div class="card">
<div class="arrow-box">
<span>Destinations</span>
</div>
<div class="choice" style="z-index: 1">
<div class="choice-header">New York</div>
<div class="choice-content" style="background: red"></div>
</div>
<div class="choice" style="z-index: 2">
<div class="choice-header">Boston</div>
<div class="choice-content" style="background: #801566"></div>
</div>
<div class="choice" style="z-index: 3">
<div class="choice-header">Seattle</div>
<div class="choice-content" style="background: green"></div>
</div>
<div class="choice" style="z-index: 4">
<div class="choice-header">Washington</div>
<div class="choice-content" style="background: #1e3180"></div>
</div>
<div class="choice" style="z-index: 5">
<div class="choice-header">San Francisco</div>
<div class="choice-content" style="background: #e5f400"></div>
</div>
</div>
CSS
.choice {
transition: .6s;
margin-bottom: -264px;
z-index: 0;
}
.choice-content {
transition: .6s;
}
.choice-header {
height: 44px;
background: #49647a;
transition: .6s;
transition-timing-function: ease-in-out;
text-align: center;
line-height: 44px;
color: white;
font-size: 22px;
font-family: 'PFBagueSansProLight', sans-serif;
text-transform: uppercase;
cursor: pointer;
}
.choice-header:after {
content: '';
position: absolute;
margin-top: 15px;
right: 22px;
display: inline-block;
width: 18px;
height: 18px;
background: url("/static/pages/img/polygon.png") no-repeat center;
transition: 0.6s;
}
.choice:last-child {
margin-bottom: 0;
}
.choice.selected {
transform: translate3d(0, -265px, 0);
margin-bottom: -265px;
}
.choice.selected > .choice-header:after {
transform: rotate(180deg);
}
.choice-content {
height: 265px;
}
.card {
height: 527px;
background: #ebebeb;
overflow: hidden;
}
.arrow-box {
position: relative;
background: #49647a;
height: 44px;
margin-bottom: 260px;
}
.arrow-box:after {
top: 100%;
left: 50%;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(73, 100, 122, 0);
border-top-color: #49647a;
border-width: 16px 165px 0 165px;
border-style: solid;
margin-left: -165px;
}
.arrow-box span {
text-align: center;
vertical-align: middle;
display: block;
height: 44px;
line-height: 44px;
font-size: 22px;
color: white;
}
JavaScript
$('.choice-header').click(function() {
var elem = $(this).parents().eq(1).find('.choice');
var i = $(this).hasClass('selected') ? 0 : 1;
var n = elem.index($(this).parent());
elem.removeClass('selected');
elem.slice(0, n + i).addClass('selected');
});
Codepen
You can see that .choice-content interferes with other .choices during the transition animation. Is there a way to avoid that?
You have assigned z-index to each .choice which is correct but you forgot to give position to them. Codepen
.choice {
transition: .6s;
margin-bottom: -264px;
z-index: 0;
position: relative;
}
Point, Note:
Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).