Hi - where would I find something similar to this:
https://www.filmproposals.com/
see TOP SELLERS
Financing Bundles, Services & Toolkits Customized for Indie Filmmakers
under that there are 3 images across that get larger when you hover over them and are clickable.
I believe I got the original from the pet demo but am not sure.
Thanks.
Hello,
Yes, that's correct. You can use the Section from here: http://themes.semicolonweb.com/html/canvas/demo-pet.html .
You can consider using the Item Overlays from here: http://themes.semicolonweb.com/html/canvas/item-overlays.html and then add the Transform Utility Classes: http://docs.semicolonweb.com/docs/utility-classes/transform/ . Example:
<article class="portfolio-item transform-ts h-scale">
<div class="portfolio-image">
<a href="portfolio-single.html">
<img src="images/magazine/3.jpg" alt="Image" />
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark">
<span class="overlay-trigger-icon size-lg op-ts bg-dark text-light animated op-07" data-hover-animate="op-1" data-hover-animate-out="op-07" style="animation-duration: 600ms;"><i class="icon-line-image"></i></span>
</div>
<div class="bg-overlay-content text-overlay-mask dark align-items-end justify-content-start">
<h4 class="mb-0">Beautiful Hair</h4>
</div>
</div>
</div>
</article>This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thanks - that type of explanation is way out of my league. I just need code I can copy/paste and then make image and text changes. I have zero clue what a utility class is. But thank you I'll save the notes in case I ever do.
Hello,
The above code provided will work fine. You can make further changes according to your needs. You will just need to add them inside the Columns (.col-*). That's it.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
I tried it but it just put one huge image on the screen with text underneath. So no.
Hello,
Your Website must be using the CSS Codes from Canvas 6 in order for the above codes to work correctly, then the Text will be displayed overlaying the Image. You can check more examples here: http://themes.semicolonweb.com/html/canvas/item-overlays.html .
Additionally, as we have mentioned in our previous reply, these odes must be placed inside the Bootstrap Grid. Example:
<div class="row">
<div class="col-lg-4">
<article class="portfolio-item transform-ts h-scale">
<div class="portfolio-image">
<a href="portfolio-single.html">
<img src="images/magazine/3.jpg" alt="Image" />
</a>
<div class="bg-overlay">
<div class="bg-overlay-content dark">
<span class="overlay-trigger-icon size-lg op-ts bg-dark text-light animated op-07" data-hover-animate="op-1" data-hover-animate-out="op-07" style="animation-duration: 600ms;"><i class="icon-line-image"></i></span>
</div>
<div class="bg-overlay-content text-overlay-mask dark align-items-end justify-content-start">
<h4 class="mb-0">Beautiful Hair</h4>
</div>
</div>
</div>
</article>
</div>
<div class="col-lg-4">
...
</div>
<div class="col-lg-4">
...
</div>
</div>Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard