I am trying to include a video gallery of youtube videos using lightgallery but I can't get the video player to work. It instead opens youtube on a new tab. I am using cdn links to load lightgallery and it looks like i'm missing lg-video. However when I include lg-video's cdn link, I am getting console errors about something being undefined. Can someone please answer this with all the script tags that I would need to include in my HTML code?
This is what I have:
lightGallery(document.getElementById('lightgallery'), {
pager:true,
thumbnail:true,
});
lightGallery(document.getElementById('video-gallery'), {});
body{
background-color: #152836
}
.demo-gallery > ul {
margin-bottom: 0;
}
.demo-gallery > ul > li {
float: left;
margin-bottom: 15px;
margin-right: 20px;
width: 200px;
}
.demo-gallery > ul > li a {
border: 3px solid #FFF;
border-radius: 3px;
display: block;
overflow: hidden;
position: relative;
float: left;
}
.demo-gallery > ul > li a > img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery > ul > li a:hover > img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
opacity: 1;
}
.demo-gallery > ul > li a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery > ul > li a .demo-gallery-poster > img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery > ul > li a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .justified-gallery > a > img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery .justified-gallery > a:hover > img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
opacity: 1;
}
.demo-gallery .justified-gallery > a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery .justified-gallery > a .demo-gallery-poster > img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .video .demo-gallery-poster img {
height: 48px;
margin-left: -24px;
margin-top: -24px;
opacity: 0.8;
width: 48px;
}
.demo-gallery.dark > ul > li a {
border: 3px solid #04070a;
}
.home .demo-gallery {
padding-bottom: 80px;
}
<div class="demo-gallery">
<ul id="video-gallery">
<li class="video" data-src="https://youtu.be/YD_gvR234qg" data-poster="https://sachinchoolur.github.io/lightGallery/static/img/videos/y-video1-cover.jpg">
<a href="https://youtu.be/YD_gvR234qg">
<img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-1.jpg">
<div class="demo-gallery-poster">
<img src="https://sachinchoolur.github.io/lightGallery/static/img/play-button.png">
</div>
</a>
</li>
<li class="video" data-src="https://www.youtube.com/watch?v=Pq9yPrLWMyU"
data-poster="https://sachinchoolur.github.io/lightGallery/static/img/videos/y-video2-cover.jpg">
<a href="https://www.youtube.com/watch?v=Pq9yPrLWMyU">
<img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-2.jpg">
<div class="demo-gallery-poster">
<img src="https://sachinchoolur.github.io/lightGallery/static/img/play-button.png">
</div>
</a>
</li>
<li class="video" data-src="https://vimeo.com/1084537"
data-poster="https://sachinchoolur.github.io/lightGallery/static/img/videos/v-video1-cover.jpg">
<a href="https://vimeo.com/1084537">
<img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-v-v-1.jpg">
<div class="demo-gallery-poster">
<img src="https://sachinchoolur.github.io/lightGallery/static/img/play-button.png">
</div>
</a>
</li>
<li class="video" data-src="https://vimeo.com/35451452"
data-poster="https://sachinchoolur.github.io/lightGallery/static/img/videos/v-video2-cover.jpg">
<a href="https://vimeo.com/35451452">
<img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-v-v-2.jpg">
<div class="demo-gallery-poster">
<img src="https://sachinchoolur.github.io/lightGallery/static/img/play-button.png">
</div>
</a>
</li>
</ul>
</div>
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lg-video/1.2.2/lg-video.min.js"></script>
Is it possible to link a CSS hover action to another link with jQuery (or pure CSS for that matter)?
I have a combined hover and tooltip animation meant as an overlay over a map. What I want to achieve is having the hover firing when hovering over the city names from the list.
a {
text-decoration: none;
}
a:hover {
color: #d82631;
}
.location {
position: absolute;
}
.kart_dot {
position: relative;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
cursor: pointer;
}
.kart_dot::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background: #d82631 none repeat scroll 0% 0%;
border-radius: 50%;
margin-top: -6px;
margin-left: -6px;
}
.kart_dot:hover::before,
.kart_dot:focus::before,
.kart_dot:active::before {
background-color: #000;
-webkit-transition: all 0.20s ease-in-out !important;
-moz-transition: all 0.20s ease-in-out !important;
-ms-transition: all 0.20s ease-in-out !important;
-o-transition: all 0.20s ease-in-out !important;
width: 18px;
height: 18px;
margin-top: -9px;
margin-left: -9px;
}
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 15px;
width: 160px;
color: #000;
content: attr(data-tooltip);
font-size: 14px;
line-height: 0.9;
}
.tooltip-hoyre:before,
.tooltip-hoyre:after {
bottom: 50%;
left: 100%;
}
.tooltip-hoyre:before {
margin-bottom: 0;
margin-left: -8px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-hoyre:hover:before,
.tooltip-hoyre:hover:after,
.tooltip-hoyre:focus:before,
.tooltip-hoyre:focus:after {
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
.tooltip-hoyre:after {
margin-left: 0;
margin-bottom: -16px;
margin-left: -18px;
}
<div>New York</div>
<div>Washington</div>
<div class="location" style="top: 20%; left: 20%;">
<a href="#new_york" class="tooltip-hoyre" data-tooltip="New York">
<div class="kart_dot"></div>
</a>
</div>
<div class="location" style="top: 38%; left: 20%;">
<a href="#washington" class="tooltip-hoyre" data-tooltip="Washington">
<div class="kart_dot"></div>
</a>
</div>
I've also included this as a fiddle: https://jsfiddle.net/7Lsvdqpx/3/
I have tried several suggested methods without any luck, such as this: Trigger hover with jQuery?
You can do this with pure CSS and no jQuery by using the adjacent selector (~). I've implemented it in the snippet below and had to add a few HTML classes. Here's an example of how that works:
.list-ny:hover ~ .location .dot-ny:before,
.list-ny:hover ~ .location .dot-ny:after,
.list-wa:hover ~ .location .dot-wa:before,
.list-wa:hover ~ .location .dot-wa:after
The above snippet says... if you hover the .list-ny menu item, then select an adjacent .location element that has a .dot-ny:before in it and apply the relevant styles.
Here's the full example with the hover implemented for all relevant properties:
a {
text-decoration: none;
}
a:hover {
color: #d82631;
}
.location {
position: absolute;
}
.kart_dot {
position: relative;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
cursor: pointer;
}
.kart_dot::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background: #d82631 none repeat scroll 0% 0%;
border-radius: 50%;
margin-top: -6px;
margin-left: -6px;
}
.kart_dot:hover::before,
.kart_dot:focus::before,
.kart_dot:active::before,
.list-ny:hover ~ .location .dot-ny .kart_dot:before,
.list-wa:hover ~ .location .dot-wa .kart_dot:before {
background-color: #000;
-webkit-transition: all 0.20s ease-in-out !important;
-moz-transition: all 0.20s ease-in-out !important;
-ms-transition: all 0.20s ease-in-out !important;
-o-transition: all 0.20s ease-in-out !important;
width: 18px;
height: 18px;
margin-top: -9px;
margin-left: -9px;
}
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.list-ny:hover ~ .location .dot-ny:before,
.list-ny:hover ~ .location .dot-ny:after,
.list-wa:hover ~ .location .dot-wa:before,
.list-wa:hover ~ .location .dot-wa:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 15px;
width: 160px;
color: #000;
content: attr(data-tooltip);
font-size: 14px;
line-height: 0.9;
}
.tooltip-hoyre:before,
.tooltip-hoyre:after {
bottom: 50%;
left: 100%;
}
.tooltip-hoyre:before {
margin-bottom: 0;
margin-left: -8px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-hoyre:hover:before,
.tooltip-hoyre:hover:after,
.tooltip-hoyre:focus:before,
.tooltip-hoyre:focus:after,
.list-ny:hover ~ .location .dot-ny:before,
.list-ny:hover ~ .location .dot-ny:after,
.list-wa:hover ~ .location .dot-wa:before,
.list-wa:hover ~ .location .dot-wa:after {
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
.tooltip-hoyre:after {
margin-left: 0;
margin-bottom: -16px;
margin-left: -18px;
}
<div class="list-ny">New York</div>
<div class="list-wa">Washington</div>
<div class="location" style="top: 20%; left: 20%;">
<a href="#new_york" class="tooltip-hoyre dot-ny" data-tooltip="New York">
<div class="kart_dot"></div>
</a>
</div>
<div class="location" style="top: 38%; left: 20%;">
<a href="#washington" class="tooltip-hoyre dot-wa" data-tooltip="Washington">
<div class="kart_dot"></div>
</a>
</div>
Jon's answer is good but if you have many cities you can try mine with jquery.
$('.city a').mouseover(function () {
$('.location').find('a[href="'+$(this).attr('href')+'"]').addClass('hovered');
}).mouseleave(function () {
$('.location').find('a[href="'+$(this).attr('href')+'"]').removeClass('hovered');
});
a {
text-decoration: none;
}
a:hover {
color: #d82631;
}
.location {
position: absolute;
}
.kart_dot {
position: relative;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
cursor: pointer;
}
.kart_dot::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background: #d82631 none repeat scroll 0% 0%;
border-radius: 50%;
margin-top: -6px;
margin-left: -6px;
}
.kart_dot:hover::before,
.kart_dot:focus::before,
.hovered .kart_dot::before,
.kart_dot:active::before {
background-color: #000;
-webkit-transition: all 0.20s ease-in-out !important;
-moz-transition: all 0.20s ease-in-out !important;
-ms-transition: all 0.20s ease-in-out !important;
-o-transition: all 0.20s ease-in-out !important;
width: 18px;
height: 18px;
margin-top: -9px;
margin-left: -9px;
}
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.hovered:before,
.hovered:after,
.tooltip:focus:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 15px;
width: 160px;
color: #000;
content: attr(data-tooltip);
font-size: 14px;
line-height: 0.9;
}
.tooltip-hoyre:before,
.tooltip-hoyre:after {
bottom: 50%;
left: 100%;
}
.tooltip-hoyre:before {
margin-bottom: 0;
margin-left: -8px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-hoyre:hover:before,
.tooltip-hoyre:hover:after,
.tooltip-hoyre:focus:before,
.tooltip-hoyre:focus:after,
.hovered:before,
.hovered:after{
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
.tooltip-hoyre:after {
margin-left: 0;
margin-bottom: -16px;
margin-left: -18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-ny city">New York</div>
<div class="list-wa city">Washington</div>
<div class="location" style="top: 20%; left: 20%;">
<a href="#new_york" class="tooltip-hoyre dot-ny" data-tooltip="New York">
<div class="kart_dot"></div>
</a>
</div>
<div class="location" style="top: 38%; left: 20%;">
<a href="#washington" class="tooltip-hoyre dot-wa" data-tooltip="Washington">
<div class="kart_dot"></div>
</a>
</div>
I've made some nice hamburger effect which is pretty common these days over the websites in mobile navigation bar.
So when someone click the hamburger it turn the X perfectly (when adding a "open" class) but when the class removed the animation is changing weirdly, please watch the effect at the following code:
HTML:
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
CSS:
#hamburger {
float: left;
width: 20px;
height: 25px;
position: relative;
}
#hamburger span {
width: 100%;
height: 3px;
border-radius: 5px;
background: #000000;
position: absolute;
display: block;
-webkit-transform: rotate3d(0, 0, 1, 0deg);
-moz-transform: rotate3d(0, 0, 1, 0deg);
-o-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
#hamburger span:nth-child(1) {
top: 0;
-moz-transition: top 0.3s ease-in-out, -moz-transform 0.3s ease 0.3s;
-o-transition: top 0.3s ease-in-out, -o-transform 0.3s ease 0.3s;
-webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s ease;
-webkit-transition-delay: 0s, 0.3s;
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
#hamburger span:nth-child(2) {
top: 7px;
opacity: 1;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
#hamburger span:nth-child(3) {
top: 14px;
-moz-transition: top 0.3s ease-in-out, -moz-transform 0.3s ease 0.3s;
-o-transition: top 0.3s ease-in-out, -o-transform 0.3s ease 0.3s;
-webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s ease;
-webkit-transition-delay: 0s, 0.3s;
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
#hamburger.open span:nth-child(1) {
top: 7px;
transform: rotate3d(0, 0, 1, 45deg);
}
#hamburger.open span:nth-child(2) {
opacity: 0;
}
#hamburger.open span:nth-child(3) {
top: 7px;
transform: rotate3d(0, 0, 1, -45deg);
}
Javascript:
$(document).ready(function () {
$('#hamburger').click(function () {
$(this).toggleClass('open');
});
});
https://jsfiddle.net/phhkL4bu/4/
Can you please help me out?
You can correct the removal animation by doing the following:
Set the forward transition's setting within the .open selector. When the .open class is added, the opacity of second child is transitioned for a duration of 0.3s without any delay. At the same time, the top position of the other 2 children is also being transitioned. Then after a 0.3s delay, the transform of the 1st and 3rd children is transitioned. This gives the effect of the top and the bottom bar moving down and then rotating.
Set its exact reverse as transition setting in the default selector. That is,make the transform on the 1st and 3rd child transition immediately with a 0.3s duration while the top of these two children and the opacity of the 2nd child are transitioned after a delay of 0.3s. This setting will apply when the element loses the .open class and so,will produce the reverse effect.
$(document).ready(function() {
$('#hamburger').click(function() {
$(this).toggleClass('open');
});
});
#hamburger {
float: left;
width: 20px;
height: 25px;
position: relative;
}
#hamburger span {
width: 100%;
height: 3px;
border-radius: 5px;
background: #000000;
position: absolute;
display: block;
transform: rotate3d(0, 0, 1, 0deg);
}
#hamburger span:nth-child(1) {
top: 0;
transition: top 0.3s ease-in-out 0.3s, transform 0.3s ease;
}
#hamburger span:nth-child(2) {
top: 7px;
opacity: 1;
transition: opacity 0.3s ease-in-out 0.3s;
}
#hamburger span:nth-child(3) {
top: 14px;
transition: top 0.3s ease-in-out 0.3s, transform 0.3s ease;
}
#hamburger.open span:nth-child(1) {
top: 7px;
transform: rotate3d(0, 0, 1, 45deg);
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
#hamburger.open span:nth-child(2) {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
#hamburger.open span:nth-child(3) {
top: 7px;
transform: rotate3d(0, 0, 1, -45deg);
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
Is there any possible way to use media queries on content loaded by AJAX? I'm using .load() to load a html snippet into the web page. It is a light box I created using CSS. The problem is that media queries don't seem to have any effect on it.
Once the movie has been clicked, a html snippet is loaded into the div "lightbox-target" and a lightbox appears up on the screen. The lightbox is styled using ".detail".
<div class="template actionmovies">
<h1 class="name">Batman: The Dark Knight</h1>
<h2 class="imdb">9/10</h2>
<h3 class="rotten">94%</h3>
<a class="lightbox" href="#The_Dark_Knight" name="The_Dark_Knight">
<img src="images/darkknight.jpg" />
</a>
</div>
<!-- the HTML snippets load inside this div -->
<div class="lightbox-target">
</div>
CSS
.lightbox-target {
position: fixed;
background: rgba(0,0,0,0.85);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
z-index: 1000;
}
.detail {
position: absolute;
top: 100px;
height: 525px;
width: 65vw;
left: 50%;
margin-left: -34vw;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.9);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
background-color: #3D3D3D;
z-index: 1001;
padding: 0 10px 0 20px;
border-radius: 10px;
}
a.lightbox-close {
display: block;
color: white;
position: absolute;
padding: 15px 20px 0 0;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
i:hover {
opacity: 0.65;
}
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
#media all and (max-width: 1405px){
.detail {
position: absolute;
top: 100px;
height: 500px;
width: 60vw;
left: 50%;
margin-left: -34vw;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.9);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
background-color: #3D3D3D;
z-index: 1001;
padding: 0 10px 0 20px;
border-radius: 10px;
}
}
I have a link that changes colour when mouse hovers over it and i am fully conformable with the coding for this however i would like the however effect to slide down as oppose to just change colour. how is this possible with css. I have looked around stack overflow but only able to find instances where people use background images and alter the its position. Is that the only way to make this possible?
It is difficult to articualte what i am trying to achieve but it is on show on this website weblounge.be the effect that i am trying to achieve is on the two links on the homepage
#contactlink {
display: inline-block;
font-weight: 700;
text-transform: uppercase;
padding: 11px 51px;
border: 1px solid #fff;
-webkit-transition: .2s;
transition: .2s;
margin-left: 78px;
margin-top: 40px;
float: left;
color: #FFF;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
text-decoration: none;
opacity: 0;
}
#contactlink:hover {
background-color: #FFF;
color: #666;
border: 1px solid #fff;
-webkit-transition: .2s;
transition: .2s;
}
Let's talk
https://jsfiddle.net/6t3quy4w/5/
The website you linked does theirs by having the :before pseudo-element transition its scale over top of the button. It also required having a span inside the button so that its z-index could be set on top of the :before element. Here is an example:
a.color-change {
display: inline-block;
padding: 15px;
color: black;
background-color: white;
position: relative;
padding: 15px;
border: 1px solid black;
text-decoration: none;
z-index: 0;
}
a.color-change:before {
content: ' ';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #777;
transform: scale(1, 0);
transition: all .25s ease-out;
transform-origin: center top;
z-index: 0;
}
a.color-change:hover:before {
transform: scale(1);
}
a.color-change span {
z-index: 1;
position: relative;
}
<span>Hover Over Me</span>
Not sure why your using whit on white, anyway based on my understanding i have provide some thing for you
#contactlink {
background: #1568b6;
color: #fff;
display: inline-block;
line-height: normal;
padding: 17px 20px 16px 20px;
position: relative;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background .15s;
-moz-transition: background .15s;
-ms-transition: background .15s;
-o-transition: background .15s;
transition: background .15s
}
#contactlink span {
position: relative;
z-index: 1;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s
}
#contactlink:before {
background: #6c6c6c;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: 0;
display: block;
padding: 0;
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: center top;
transform-origin: center top;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out
}
#contactlink:hover:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
<a href="#contact" class="smoothScroll" id="contactlink">
<span>Let's talk</span>
</a>