flashing iframe, page width and littlesnippets.com

Bautel · ‎01-31-2020

Hi,

I just introduced my webshop onto my site. Although I'm no expert, I managed to figure out most of it by myself, but there are still some things I could use some advise on.

For the first issue I already searched the community, but couldn't find a suitable answer.

The webshop would look a whole lot better if it were wider. Unfortunately there seems to be no easy solution to change the width of just some pages and not the entire site. Changing the theme is no option as I changed it to my satisfaction only last year.

Secondly, when visiting the site, the webshop (iframe) appears by fits and starts, in a flashing way.

And lastly, does anyone know how to apply 'littlesnippets' or know of any other way to nicely use text over image while hovering?

Thanks for your help.

Linda.

seicolegwr · ‎02-01-2020

Hi Linda,

Here’s a quick tutorial for Littlesnippets to Weebly.

First, you need to upload your image to Weebly. To do this go to THEME then EDIT HTML/CSS.
Next go to ASSETS/IMAGES and click the cog symbol.
Upload your image and SAVE. The image name will appear below.
Click on the image name and open the image.
Right click on the opened image and go to ‘copy image address’.
Paste the image address into a text document.
Next open Littlesnippets.
Click on the image hover effect of your choice.
Click on ‘Edit on Codepen’
In the HTML section change the first <img src=to your image address you got from from Weebly. Keep the quotation marks. Your image should then appear below.
Change the first alt= to your own VERY BRIEF, few words description of your image. This is needed for search engines.
Change the first <h3> to the text you want to appear on hover.
In the CSS section you can change font and font size etc. It should appear here as it would on your website. Play around until you have it right. If anything isn't right it should be obvious.
When you’re happy with your image hover effect copy the HTML code to a text file. Use ‘plain text’ if you have that option.
Only copy the HTML code for the first image (the one you made changes to). It should start something like <figure class= > and end with </figure>. Do not include any other <figure class = > This is IMPORTANT.
Next copy the entire CSS code to the same text file directly underneath the HTML code and separated by at least one blank line.
If there is any JS code, paste that underneath the CSS code, also separated by at least one blank line.
BUT: if any JS code starts with /* Demo purposes only */ IGNORE it.
Return to your Weebly website.
Go to BUILD and drag an EMBED CODE element where you need your image hover effect to go.
Open the EMBED CODE element and paste your entire code from Littlesnippets.
Sometimes embedded code does not show in the Weebly editor so best to PUBLISH your site and view it live.
If you’re happy with the effect, great. If not, you can still edit the code in the EMBED CODE element, PUBLISH and try again.

Hope this makes sense, Gary.

Bautel · ‎02-04-2020

Hey Gary,

Thanks for your input.

They are really clear instructions for a dummy to follow, but apparently I'm doing something wrong.

The image appears allright, but the CSS part turns up under the image, so clearly the hovering is not on either. Any idea what I could be doing wrong?

Would you by any chance also have a solution to my other problem? I would like just one or two pages to be wider so my webshop and the different categories don't look so cramped.

Thanks in advance!

Linda.

Bautel · ‎02-08-2020

Anyone?

Bernadette3 · ‎02-08-2020

It might help to post a direct link to your site along with the code you are trying to add, @Bautel

@BJ

Bautel · ‎02-09-2020

Hey,

This is the code:

<img src="https://www.weebly.com/editor/uploads/1/4/0/0/14002507/custom_themes/303290067934008566/files/images...

" alt="ecologische relatiegeschenken" />

<h3>ecologisch </span></h3>

</figcaption>

</figure>

@import url(https://fonts.googleapis.com/css?family=Roboto:100,700;

.snip1585 {

background-color: #000;

color: #fff;

display: inline-block;

font-family: 'Roboto', sans-serif;

font-size: 24px;

margin: 10px;

max-width: 315px;

min-width: 230px;

overflow: hidden;

position: relative;

text-align: center;

width: 100%;

}

.snip1585 * {

-webkit-box-sizing: border-box;

box-sizing: border-box;

-webkit-transition: all 0.45s ease;

transition: all 0.45s ease;

}

.snip1585:before,

.snip1585:after {

background-color: rgba(0, 0, 0, 0.5);

border-top: 50px solid rgba(0, 0, 0, 0.5);

border-bottom: 50px solid rgba(0, 0, 0, 0.5);

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

content: '';

-webkit-transition: all 0.3s ease;

transition: all 0.3s ease;

z-index: 1;

opacity: 0;

}

.snip1585:before {

-webkit-transform: scaleY(2);

transform: scaleY(2);

}

.snip1585:after {

-webkit-transform: scaleY(2);

transform: scaleY(2);

}

.snip1585 img {

vertical-align: top;

max-width: 100%;

backface-visibility: hidden;

}

.snip1585 figcaption {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

align-items: center;

z-index: 1;

display: flex;

flex-direction: column;

justify-content: center;

line-height: 1.1em;

opacity: 0;

z-index: 2;

-webkit-transition-delay: 0s;

transition-delay: 0s;

}

.snip1585 h3 {

font-size: 1em;

font-weight: 400;

letter-spacing: 1px;

margin: 0;

text-transform: uppercase;

}

.snip1585 h3 span {

display: block;

font-weight: 700;

}

.snip1585 a {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

z-index: 3;

}

.snip1585:hover > img,

.snip1585.hover > img {

opacity: 0.7;

}

.snip1585:hover:before,

.snip1585.hover:before,

.snip1585:hover:after,

.snip1585.hover:after {

-webkit-transform: scale(1);

transform: scale(1);

opacity: 1;

}

.snip1585:hover figcaption,

.snip1585.hover figcaption {

opacity: 1;

-webkit-transition-delay: 0.1s;

transition-delay: 0.1s;

}

Obviously, I can't post the link to the website when published, because that would mean that the code would be all over the page the whole time, but I can post a link to the website/page and a photo of what the try-outs look like.

Thanks,

Linda.

BJ5 · ‎02-11-2020

There's a closing parenthesis missing from your CSS import, and if this entire block of code is in an Embed Code element you'll also want to wrap the CSS in style tags, like this:

<figure class="snip1585">
<img src="https://www.weebly.com/editor/uploads/1/4/0/0/14002507/custom_themes/303290067934008566/files/images...
" alt="ecologische relatiegeschenken" />
<figcaption>
<h3>ecologisch </span></h3>
</figcaption>
<a href="#"></a>
</figure>

<style>
   @import url(https://fonts.googleapis.com/css?family=Roboto:100,700Smiley Wink);
   .snip1585 {
   background-color: #000;
   color: #fff;
   display: inline-block;
   font-family: 'Roboto', sans-serif;
   font-size: 24px;
   margin: 10px;
   max-width: 315px;
   min-width: 230px;
   overflow: hidden;
   position: relative;
   text-align: center;
   width: 100%;
   }

   .snip1585 * {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: all 0.45s ease;
   transition: all 0.45s ease;
   }

   .snip1585:before,
   .snip1585:after {
   background-color: rgba(0, 0, 0, 0.5);
   border-top: 50px solid rgba(0, 0, 0, 0.5);
   border-bottom: 50px solid rgba(0, 0, 0, 0.5);
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   content: '';
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
   z-index: 1;
   opacity: 0;
   }

   .snip1585:before {
   -webkit-transform: scaleY(2);
   transform: scaleY(2);
   }

   .snip1585:after {
   -webkit-transform: scaleY(2);
   transform: scaleY(2);
   }

   .snip1585 img {
   vertical-align: top;
   max-width: 100%;
   backface-visibility: hidden;
   }

   .snip1585 figcaption {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   align-items: center;
   z-index: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   line-height: 1.1em;
   opacity: 0;
   z-index: 2;
   -webkit-transition-delay: 0s;
   transition-delay: 0s;
   }

   .snip1585 h3 {
   font-size: 1em;
   font-weight: 400;
   letter-spacing: 1px;
   margin: 0;
   text-transform: uppercase;
   }

   .snip1585 h3 span {
   display: block;
   font-weight: 700;
   }

   .snip1585 a {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 3;
   }

   .snip1585:hover > img,
   .snip1585.hover > img {
   opacity: 0.7;
   }

   .snip1585:hover:before,
   .snip1585.hover:before,
   .snip1585:hover:after,
   .snip1585.hover:after {
   -webkit-transform: scale(1);
   transform: scale(1);
   opacity: 1;
   }

   .snip1585:hover figcaption,
   .snip1585.hover figcaption {
   opacity: 1;
   -webkit-transition-delay: 0.1s;
   transition-delay: 0.1s;
   }
</style>

Bautel · ‎02-12-2020

Hi,

Thanks for that. It works, although I was happy to be at least that clever not to embed a smiley and a wink in the code ;-).

Do you have any idea how I can make the hovered image into a button, that is how to use an url to link to another page?

BJ5 · ‎02-12-2020

Haha, I didn't even realize Community had converted that!

Bautel · ‎02-13-2020

O.K., I managed to add the link to a webpage.

Anyone can help me on the widening of a single page too?
Or why my webshop loads in flashes?

Thanks,
Linda.

Jekyll · ‎09-08-2021

How did you manage to add the weblink to the image?

Thanks,

James

hitchcackle · ‎02-21-2020

@BJ I've used a hover effect from littlesnippets.com as well in my site. Except, unlike our friend above, I put my css code into main.less (as opposed to in the embed code element). I've used this effect on many pictures throughout my site that link to other pages.

At first, I was repasting the CSS into main.less for every instance of the effect and changing the 'snip1585' chronologically going up one number for every instance (also changing the html in each embed element to reflect that: snip1585, snip 1586, etc).

Then I thought I could have all the html for the different images reference to the same CSS, to cut down on possibly unecessary code and to make style changes across all of them easy by adjusting one bit of CSS. I edited my html to all reference the first bit of CSS (snip1584).

Which way should I be doing this? Separate sections of CSS for each instance of the hover effect? Or is it alright for them all to reference the same CSS. There are approx 20 instances throughout the site.

**I am experiencing some broken images (one's that would have the hover effect) when I view my published page. I'm pretty sure the broken images have something to do with how I've coded the hover effect, as I have not experienced them prior to this.**

I appreciate any help on this!

Thanks,

Adam

BJ5 · ‎02-23-2020

You could change each snippet to just use the same class so the same CSS code works for each, though that would also make it so they all use the same images for hovers. What I would do if it was me is add a second class to each snippet, so they all have a class like:

class="snippet1234 hoverSnippet"

class="snippet5678 hoverSnippet"

etc

With it like that, you can put everything that they all share in one css selector:

.hoverSnippet {

/* common rules here */

}

Then use the individual selectors you have right now to only have the rules which are unique to each snippet.

For the missing images I'd probably need to see an example snippet for one that isn't working.