I am trying to get my responsive Masonry to work with double overlay in WordPress. Currently, I have managed to get the dark overlay size match perfectly with the thumbnail image. I have also added texts which appears on top of the overlay, hence double overlay on a thumbnail.
The issue is that when I resize the window or view the blog posts through mobile, the overlay hover size exceeds the thumbnail size whiles on some thumbnails the overlay position is completely off.
How do I ensure that the double overlays (black transparent hover and texts) stay in the same position and scale properly along with the thumbnail?
Here is my code:
.title, .excerpt, .date {
position: absolute;
z-index: 1;
}
.title {
bottom: 150px;
}
.date {
bottom: 130px;
}
.excerpt {
bottom: 100px;
}
.overlay:after {
content: '';
position: absolute;
width: 362px;
height: 362px;
top: 5px;
left: 1;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.overlay:hover:after {
opacity:1;
}
Update: I have also added overlay into my media queries but it doesn’t take the overlay into effect like my thumbnails do.
Update 2: Dantcho's code fixes the issue to make the overlay responsive with the thumbnail. The next issue is that because the overlay is set to 100%, when I use padding: 10px; it makes the grid bigger, but I can't make it smaller. The thumbnail has padding, and I'd like to keep the padding that way.
Update 3: Not sure if this is viable fix for long term but either way, it works. This will keep the overlay responsive, and I adjusted the top, left, width and height a little bit to fit over the thumbnail.
.overlay:after {
content: '';
position: absolute;
width: 97.5%;
height: 97.5%;
top: 5px;
left: 5px;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
Update 4: I found a better alternative, this will prevent the overlay going slightly out of place when resizing the browser.
.overlay:after {
content: '';
position: absolute;
display: block;
height: calc(100% - 10px);
width: calc(100% - 10px);
top: 5px;
left: 5px;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
Cheers!
Change this:
.overlay:after {
content: '';
position: absolute;
width: 362px;
height: 362px;
top: 5px;
left: 1;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
to this:
.overlay:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
Hope this fixes your issue. If not feel free to ask!
Related
.mainMenu ::after {
position: absolute;
content: "";
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: #0a462d;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
I want to be able to toggle my transform effects on and off with a button click. Is that possible?
I have tried making a simple function in JS but I am not sure if I am calling it correctly.
I have this icon for exiting modal which stays perfectly fixed when scrolling down on Chrome, but I noticed it doesn't work in other browsers like Firefox and Safari.
I also notited that the icon is little off in the right corner but after split second it reposition itself where it should be. Any ideas what's causing this? Is it because the parent which is the modal is of position fixed and you can't have fixed position inside fixed container? I'm still learning HTML.
.outer {
position: fixed;
top: 0;
width: 70px;
cursor: pointer;
z-index: 3;
right: 0;
margin: 20px 20px 0px 0px;
}
.inner {
width: inherit;
text-align: center;
}
.inner::before, .inner::after {
position: absolute;
content: '';
height: 1px;
width: inherit;
background: #FFC107;
left: 0;
transition: all .3s ease-in;
#animatedModal3 {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow-y: auto;
z-index: 9999;
opacity: 1;
animation-duration: 0.6s;
}
.inner::after {
bottom: 50%;
transform: rotate(-45deg);
}
.inner::before {
top: 50%;
transform: rotate(-45deg);
}
<div id="animatedModal3" class="bg-black">
<div class="close-animatedModal3 py-3 bg-black">
<div class="outer">
<div class="inner">
<label class="label2">Back</label>
</div>
</div>
</div>
</div>
You have a bracket that is not closed here .inner::before, .inner::after {...
I need a "special" animation and i am not finding how i will get this sort of animation i seek for, on each triangle should make the same animation, one to the left and one to the right, i need the right way to start making this. Do i use JQuery for this ?
The animation: I want the triangles to move more or less to the middle of screen in order to show the content that is hidden, as it happens here: beepi.com/default.aspx on the circles
I currently have this:
#anim {
z-index: 1;
position: relative;
height: 100%;
min-height: 100%;
background-image: url("http://i.imgur.com/EPM2arR.jpg");
background-image: no-repeat;
background-size: 100%;
}
#anim img {
z-index: 2;
position: relative;
height: 100%;
width: 100%;
}
.arrow-left {
text-align: left;
padding: 1.5% 12px;
text-transform: uppercase;
position: absolute;
width: 13%;
left: 0;
z-index: 3;
top: 40%;
}
.arrow-right {
text-align: right;
padding: 1.5% 15px;
text-transform: uppercase;
position: absolute;
width: 13%;
right: 0;
z-index: 3;
top: 40%;
}
.arrow-right h2 {
font-size: 28px;
color: #FFF;
}
.arrow-left h2 {
font-size: 28px;
color: #FFF;
}
<section id="anim">
<img src="http://i.imgur.com/AeCYNqc.png">
<div class="arrow-right">
<h2>Scouting For Companies</h2>
</div>
<div class="arrow-left">
<h2>Seeking For Ideas</h2>
</div>
</section>
The animation should be like this:
If I understood well, you need css animation. You can use something like this:
/* For right side */
.arrow-right{
animation: aniright 3s ease;
animation-fill-mode: forwards;
}
#keyframes aniright {
from { right: 0; }
to { right: 13%; }
}
/* For left side */
.arrow-left{
animation: anileft 3s ease;
animation-fill-mode: forwards;
}
#keyframes anileft {
from { left: 0; }
to { left: 13% }
}
I believe you will need to cut and put arrows from image in .arrow-left and .arrow-right classes together will all other elements you want to slide in.. and also put some action to call animation. For e.g:
.arrow-left:hover{
animation: anileft 3s ease;
animation-fill-mode: forwards;
}
... will start animation when your cursor goes over .arrow-left element.
I am trying to create a simple full page overlay with bootstrap.
However the overlay is appearing 'behind' my main content (a blue box in the example).
I'm sure I am missing something very obvious however any help would be appreciated.
I need to overlay to disappear when the page is clicked anywhere, this is working.
I have included my current code and a jsfiddle. You can see that the overlay is behind the blue box, which seems to load first?
HTML
<div class="overlay overlay-data">
<p>click anywhere to close this overlay</p>
</div>
<div class="col-md-4">
<div class="menu-item blue">
<p>MY INFO BOX</p>
</div>
</div>
JS
$(document).ready(function () {
$(".overlay").addClass('overlay-open');
$("section").addClass('blur');
});
$(document).on('click', '.overlay', function () {
$(".overlay").removeClass('overlay-open');
$("section").removeClass('blur');
});
CSS
.blur {
-webkit-filter: blur(2px);
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
}
.overlay p {
text-align: center;
position: relative;
top: 20%;
height: 60%;
font-size: 80px;
}
.overlay-data {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
visibility: 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-open {
opacity: 0.5;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.blue {
background: #28ABE3;
}
.menu-item {
padding-top: 45px;
padding-bottom: 45px;
margin-bottom: 45px;
transition: all 0.3s;
border: 5px solid transparent;
}
Specify the z-index in your css to be greater than your main content.
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index: 1;
}
JSFiddle
Read more about it at MDN, z-index.
Use z-index to add overlay effect use this css
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index:99999
}
I am having some difficulty integrating leaflet with Bootstrap. I am using a script that creates a collapsible left navbar. When I interact with the leaflet map, the bootstrap navbar disappears.
This seems to be a CSS conflict, but I can't seem to identify where to begin troubleshooting. Here is the jsfiddle followed by CSS: http://jsfiddle.net/6sSrE/. Notice that when clicking the map, the navbar disappears.
It would be helpful if another set of eyes could suggest a different direction to identify this problem. I would really like to use Bootstrap for this application, but I can't resolve the conflict.
html, body, #map {
height: 100%;
margin: 0;
}
body .viewport {
position: absolute;
padding: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
body .viewport .frame {
position: absolute;
width: 200%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
padding: 0;
}
body .viewport .frame .navbar .navbar-inner {
border-radius: 0;
padding-left: 5px;
}
body .viewport .frame .menu {
height: 100%;
/* background-color: #3D6AA2; */
}
body .viewport .frame .menu.collapse {
float: left;
height: 100% !important;
width: auto;
}
body .viewport .frame .menu.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
body .viewport .frame .menu.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
body .viewport .frame .menu.collapse.in.width {
width: auto;
}
body .viewport .frame .menu.collapse.in.height {
height: auto;
}
body .viewport .frame .menu .collapse-inner {
position: relative;
width: 250px;
height: 100%;
}
body .viewport .frame .menu .navbar .navbar-inner {
text-align: center;
color: grey;
font-size: 1.2em;
line-height: 38px;
}
body .viewport .frame .menu .nav-stacked {
padding: 0 10px;
}
body .viewport .frame .view {
width: 50%;
height: 100%;
overflow: hidden;
}
body .viewport .frame .view .navbar .navbar-inner .btn-navbar {
display: block;
float: left;
}
body .viewport .frame .view #map {
margin: auto 15px;
text-align: justify;
}
It looks like every time the map gets focused the webpage is moving 78 pixels down. (You might be able to find where this is happening and fix it.)
However I just came up with something quick that would adjust your navbar so that it would show up at the top of the page every time.
$(document).ready(function(){
var margin = 78;
$('#map').on('mousedown',function(){
$('#navBar').css('margin-top',margin+'px');
});
$('#map').blur(function(){
margin = margin+78;
});
});
Note: I also added a ID to your nav bar.
<div class="navbar navbar-inverse" id="navBar">
Here is an example, seems to work pretty good for now, but might be worth your time later to figure out why the page is being moved down.
http://jsfiddle.net/6sSrE/15/