alxfyv
-
Posts
1,885 -
Joined
-
Last visited
-
Days Won
3
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by alxfyv
-
-
You might try copying and pasting this in Design > Custom CSS:
/* ** in gallery grid, set a hover over slide effect to ** display slide title on partially transparent ** overlay */ .sqs-gallery.sqs-gallery-design-grid .slide .margin-wrapper .image-slide-title { position: absolute; bottom: 0; width: 100%; height: 0; color: white; background-color: rgba(194, 194, 163, .8); opacity: 0; transition: all .25s ease-in; } .sqs-gallery.sqs-gallery-design-grid .slide .margin-wrapper:hover .image-slide-title { height: 40%; opacity: .9; }
This should give you the effect, on hover over a slide, of a partially transparent overlay sliding up over the image and displaying the slide title.
Let me know whether this works and, if so, whether it's the type of effect you have in mind.
-Steve
- tunglmyrkvi and Lilian
-
2
-
You're quite welcome. As I said, it's my pleasure. :-)
-
It's my pleasure. :-)
The pen was not a lot of work. I already had the base code which I developed when I needed an
<iframe>
for my site. All I did was fork it and change a few lines.
I've given an answer below with the code so you don't have to use the pen. Use the code below and it should be fine.
Let me know one way or the other.
-Steve
-
Put the following in the embed block:
<div id="Iframe-Liason-Sheet" class="iframe-border center-block-horiz"> <div class="responsive-wrapper responsive-wrapper-wxh-550x2000"> <iframe src="https://docs.google.com/document/d/1VouYUL9gPUHsjCvZPwHhZ1JQ8yMhIgTTI6md5Sn-5rE/pub?embedded=true"> <p style="font-size: 110%;"><em><strong>ERROR: </strong>An iframe should be displayed here but your browser version does not support iframes.</em> Please update your browser to its most recent version and try again.</p> </iframe> </div> </div>
Put this in Custom CSS:
#Iframe-Liason-Sheet { max-width: 550px; max-height: 2000px; overflow: hidden; } /* inner wrapper: make responsive */ .responsive-wrapper { position: relative; height: 0; /* gets height from padding-bottom setting */ -webkit-overflow-scrolling: touch; overflow: auto; } .responsive-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; } /* padding-bottom = h/w as a % */ .responsive-wrapper-wxh-550x2000 { padding-bottom: 363.6364%; } .iframe-border { border: 1px solid #000; } .center-block-horiz { margin-left: auto !important; margin-right: auto !important; }
I have it working with this code on this /test page on my site. I'll leave the page up for awhile. I'll leave the pen Responsive-Iframe-REF up on CodePen permanently.
There is some extra height and some horizontal scroll at desktop/laptop sizes. I've been unable to modify this as the
<iframe>
won't display at any size other than 550x2000. It's persnickety that way. I've not encountered one like it.
If you want to provide additional styling, padding, margin, box-shadow, etc., put the class names in the
<div id="Iframe-Liason-Sheet">
opening tag and add corresponding class rule sets in CSS.
If you need help with further CSS or anything, let me know. In any case, let me know how it works.
-Steve
-
I converted your "answer" to a comment which is where these remarks should go. I replied to that comment which is what you are reading now.
I checked it out on my iPhone and iPad Air and it seems to be fine. Your are right though that it's not behaving correctly on the desktop/laptop. Let me investigate some and I will get back to you.
In the meantime, just double check that you have the HTML correct in the embed block and the CSS correct in the Custom CSS. My suspicion is that there is something in the CSS that needs adjusting.
-Steve
-
Do not set attributes in the
<iframe>
tag, especially width and height. Do it in CSS. All that's needed in the
<iframe>
tag is the src= attribute.
You will find all the HTML and CSS needed to have a responsive
<iframe>
in the pen Responsive Iframe - REF on CodePen. See the comments (comments button on the lower left) for further explanation. The
<iframe>
is responsive in that at narrower window sizes it scrolls horizontally.
Put the HTML in an embed block. Put the CSS in Design > Custom CSS. Keep or discard the CSS general styles setting border, box-shadow, padding, etc.
If you have questions, leave a comment. In any event, please let me know whether it works and satisfies your needs.
-Steve
How do I create a hover text over my grid gallery?
in Customize with code
Posted
@adeuitch:
So as not to hijack @sira's question with material not directly responsive to it, if you will pose a separate question of your own and leave a comment here with the question title and url, I will try to help. Try to decide on what effect you want for your site and pose your question as how to get that. Don't forget to give your template name and site url.
As examples of the kind of hover effects that can be achieved, see Hover.css and CSS Image Hover Effects.