I can't seem to recollect how to do this CSS only trick where one can hover over an element and the effect of the hover stays forever. I know it had something to do with transition being set to 9999s meaning it will take forever to return back to normal, hence the end result stays. This is good for making css only dialog boxes to stay open.
Using the following HTML and CSS elements:
<div>
something here
</div>
CSS:
div { width: 100px: height: 100px; transition: all 9999s; }
div:hover { height: 300px }
Related
when I press on an image its supposed to blow up into a larger picture. However, I changed the size so the image isn't fully touching the bottom and top of the screen by changing the height to 90vh. However, now when I press the image you can see it shift up that 10vh before expanding the image. Can someone help me remove that jump?
https://darrientu.com/
.pswp { height:100vh !important;
margin:auto!important;top:0 !important;
bottom:0 !important;
}
.pswp__scroll-wrap {
height:90vh !important;margin:auto!important;top:0 !important;
bottom:0 !important;
}
It may be worth undoing any styling that you've applied to it and see if this kind of functionality is supported out of the box:
Using the barsSize option:
https://photoswipe.com/documentation/options.html
Or the parseVerticalMargin event:
https://photoswipe.com/documentation/api.html
I was able to achieve a gap at the top and bottom of the image at the PhotoSwipe demo site by selecting All Controls and adding the styles below to hide/disable the UI with CSS:
.pswp__ui {
opacity: 0!important;
pointer-events: none;
}
Using that in combination with the barsSize option should allow you to customise how big the gap is between the image and the browser viewport, though you probably won't be able to use vh as a unit, and will need to use something like Math.round(window.innerHeight*.1) to calculate 10% view height, or use a pixel value instead.
It's also worth looking into the Custom HTML in Slides topic in the documentation, as you may be able to add a spacer div before and after your image.
For a CSS only fix:
If you don't have access to change how PhotoSwipe is initialised, then the CSS below makes the animation less jumpy on your site, however, it does make the image go to full height first for a moment, before transitioning to 90vh.
Remove:
.pswp__scroll-wrap {
height: 90vh !important;
}
Add:
.pswp__scroll-wrap {
transition: transform 222ms cubic-bezier(.4,0,.22,1);
}
.pswp--animated-in .pswp__scroll-wrap {
transform: scale(.9);
}
To resolve the bounce, please change height: 90vh !important line under .pswp__scroll-wrap selector to 100vh. Like so:
.pswp__scroll-wrap {
height: 100vh !important;
margin: auto !important;
top: 0 !important;
bottom: 0 !important;
}
If you still want to have padding on top & bottom of the images while removing bounce bug, then either downsize the thumbnail image (one that is not used for slider) to match the full sized one (on that is duplicated via slider and scaled up) or add some kind of padding to the images.
Another workaround is to add padded blocks in .pswp__scroll-wrap:before and .pswp__scroll-wrap:after like so:
.pswp__scroll-wrap:before,
.pswp__scroll-wrap:after {
display: block;
content: "":
padding: 50px; // Set this to your preferred padding!
background: #ffffff; // also add transition for background, so it fades in nicely!
}
I couldn't find code where you defined slide thumbnail size prior the scaling, but my guess is that resizing it would also help keep the padding while having no bounce issue.
The whole issue is around you having those 90vh under the wrap while resizing the duplicate of the original image.
I've tried using the scenario in the link below too show hidden text when mouse over text. It works fine with text but what my client is needing is to hide the webbot HitCounter and show it when they place the mouse over. Any help would be greatly appreciated.
Show hidden text on hover (CSS)
<div id="DivForHoverItem">
<div id="HiddenText"><p class="auto-style4">
<!--webbot bot="HitCounter" i-image="0" I-ResetValue="0" I-Digits="0" U-Custom --></p></div>
</div>
</div>
CSS Code:
/* Div for hover item */
#DivForHoverItem {
height: 50px;
width: 300px;
background-color: black;
text-align:center;
}
#HiddenText {
display:none;
}
#DivForHoverItem:hover #HiddenText {
display:block;
}
Remember that display:none "removes" element (div do not occupy space) from layout. So You have nothing to point with cursor (without creating another wrapping div/divs with fixed size, or gettinng into js and conditions of another element) to start the hover effect.
So maybe outer wrapper div?
Maybe visibility: hidden in place display:none?
Maybe Changing the Z-Index?
Or another div on top of counter (covering it with background solid color) with alpha transparency change on hover (even fading out css animation) ?
I have a div that I want to appear when hovering over a certain area on an image. The hover effect works fine and the div appears when the hit area is hovered over, but there are two problems I am encountering.
The div that appears needs to be in a specific position overlaying the background image, but this means that it blocks part of the hit area. The portion of the hit area that is blocked by the appearing div no longer triggers the hover effect because of this, even when it is not visible. There is no way to reposition or resize the appearing div so the hit area is unblocked because they need to correspond to specific areas. How can I make sure the entire hit area triggers the hover effect while maintaining the position of the appearing div?
The div that appears holds a call to action button that users need to be able to click on once they see the div appear. However, the appearing div disappears when the user moves to click on the button. Is there a way that I can make the div remain visible long enough so the user can click the button?
I would like to accomplish this using CSS, but if JS is necessary, that's cool.
I created this fiddle as a rough idea of what the problem is. As you can see, all three of the red boxes should trigger the hover effect, but only the last one actually does because the div that appears on hover blocks them. The button would appear within the blue box, but the box disappears as soon as the mouse leaves the hit area.
I'm using opacity to show and hide the div because our site has transitions that would allow this to fade in and out. The code is simplified and stripped down, but illustrates the idea.
HTML:
<a class="hover-grid hit-area">
</a>
<a class="hover-grid hit-area">
</a>
<a class="hover-grid hit-area">
</a>
<div class="details">
</div>
CSS:
.hover-grid
{
background-color: red;
opacity: 0.25;
width:100px;
height:100px;
display: block;
float:left;
}
.details
{
opacity: 0;
background-color:blue;
width:200px;
height:150px;
position: relative;
z-index: 2;
}
.hit-area:hover ~ .details
{
opacity:1;
}
Just apply the hover effect to .detail as well. And instead of opacity use display:none, to not trigger the hover state on the invisible element.
http://jsfiddle.net/me2loveit2/3shj2omg/3/
.details
{
display:none;
background-color:blue;
width:200px;
height:150px;
position: relative;
z-index: 2;
}
.hit-area:hover ~ .details
{
display:block;
}
.details:hover
{
display:block;
}
I am designing a website where its whole background color is light green (#F5FFF6 to be exact), and now I need to create a fieldset who's background color is white (#FFFFFFF). My CSS markup is below:
#page_content {
width: 100%;
height: auto;
min-height: 100%;
position: relative;
background-color: #F5FFF6;
}
#fieldset {
background-color: #FFFFFF;
}
It kinda worked on the "light-green page background color" and my fieldset's color is white which what I wanted too. But I noticed that the area where my fieldset is positioned, the background color of the page was white too instead of that light-green. The rest were all light-green except to that area. So I tried creating another fieldset and boom! The same thing happened to the first fieldset - the area behind my fieldset was white again.
I do not understand the exact problem. If you don`t want the whole width of the page to be white just give the fieldset a width and so the background color of the page will remain green.
#fieldset {
background-color: #FFFFFF;
width: 100px;
height: 150px;
}
i made an example:
http://jsfiddle.net/aKGmc/2/
if this does not help you please upload a jsfiddle with it so i can take a look at the problem
Ids (selectors prefixed with a #) should be unique to one single element.
If you want to target more than one element of a category, use a class and the appropriate selector (<div class="something"> and .something {}) or a generic selector (div {}).
That behavior is normal.
You chose to apply the white background to an element (Fieldset) and you got the white background relative to that area. So if that is not ok, you probably want to achieve something else.
I have 2 divs one for expanding content and one for heading text.
I expand them by changing a class on the parent element (via javascript) and then setting height/width to 0 and visibility to hidden
I'm trying to figure out why the css animation stops running after the first expansion and how to make the timing consistent.
I'm using max-height for the animation because I don't know the target height.
JSFiddle
[data-element] {
transition: max-height 4s ease;
}
.collapsed [data-element="collapsed"] {
max-height: 900px;
height: auto;
width: auto;
}
I got something working here, but the animation with max-height causes a delay, making this not an ideal solution.
removing some of this helped
height:auto;
http://jsfiddle.net/XXRWx/1/