I'm currently creating a image gallery (using Zurb Foundation as Framework) and would like to show the zoom icon on image hover (like this example here: http://codepen.io/Twikito/pen/Jeaub). But I would like the icon to be a font (Font Awesome) icon and not just one but 3 individual clickable icons.. Would that be possible?
I've put a quick JSfiddle together using font-awesome. The CSS is hacked together but demonstrates what's possible. It should give you a starting point to experiment with.
<a href="#" title="" class="image">
<img src="http://www.lyricis.fr/wp-content/uploads/2010/04/kickass-film-still-01.jpg" alt="">
</a>
<div class="cn">
<div class="inner">
<i class="icon-zoom-in large"></i>
<i class="icon-cloud-download large"></i>
<i class="icon-comment large"></i>
</div>
</div>
Note: The JSfiddle above uses font-awesome.css called externally from bootstrapcdn.com
Related
Please open Microsoft Edge and go to this site here: https://www.bodecanada.com/
Click on the Scroll button at the bottom of the blue box at the top of the page. Notice that it doesn't scroll further down the page. If it does, try it a few times. It will eventually stop working. This bug is only replicable in Edge.
We developed this site in Vue.js. This is the code for the scroll button:
<div id="scroll-wrap">
<a #click="$vuetify.goTo('#section2')" class="white--text" style="margin:0 auto;">
<p class="white--text" style="font-size:12px;">Scroll</p>
<v-icon color="white" style="width:100%; text align:center;">expand_more</v-icon>
</a>
</div>
Can anyone tell why it won't always scroll in Edge? Thanks.
You could directly use <a> tag href attribute link to an element with a specified id within the page.
<a href="#section2" #click="$vuetify.goTo('#section2')" class="white--text" style="margin:0 auto;">
I want to use "semantic-ui" accordion with "rtl" icon in default accordion's icons looks like > and i want my accordions icons looks like this <
please help me to do this.
You can simply change the icon class that you are using to achieve your requirement.
I have used "angle left icon" for rtl. There are many more icon to show rtl, here is the link that contains list of supported icon by default in semantic.
<div class="ui styled accordion">
<div class=" title">
<i class="angle left icon"></i>
Title1
</div>
<div class="content">
<p>Title Content</p>
</div>
</div>
NOTE:
Make sure you are using icons from the correct version. Some of the legacy version icons doesn't work with the latest semantic version.
I try to study a Bootstrap 3 last three months.
All fine, but I would like to put in my navbar the additional image (in right side of it).
In my opinion, to insert a picture directly in HTML code like:
picture
- bad idea, and I created a with a background picture, specified through CSS, but the picture does not appear on the page ...
How can I do it?
And possible whether to do it at all?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
Follow this guide
http://getbootstrap.com/components/#navbar-brand-image
To have an additional image on the other side of the menu, you just need to put it as part of the link menu. See example:
http://jsbin.com/mupobo/edit?html,output
we are using follwing code to display images in this site:
http://demo1.kidsdial.com/
you can see 4 images below "slideshow" images
but it's not looking responsive.
That means, in mobiles and tabs it's not arranged properly & in smaller screen monitors, it's not displaying properly.
What code changes do I have to do to make it responsive?
Try this:
<img alt="" src="...topoffers1.jpg" style="max-width: 23%;">
<img alt="" src="...topoffers2.jpg" style="max-width: 50%;">
<img alt="" src="...topoffers3.jpg" style="max-width: 23%;">
http://prntscr.com/6r4iaj
http://prntscr.com/6r4igz
http://prntscr.com/6r4ilv
I have a fully working rhinoslider and lightbox2. The images slide but are also clickable, when there clicked the nice lightbox2 pops up. But for some reason the captions in the slider won't display when the other link is above it.
My code:
<ul id="slider"><li><img src="images/1.jpg" alt="" title="test" /></li> </ul>
Does anyone know why the captions won't display? And is there a solution to this problem?
http://rhinoslider.com/
http://lokeshdhakar.com/projects/lightbox2/
First of all you should fix your markup.
<ul id="slider">
<li>
<a href="images/1big.jpg" rel="lightbox[roadtrip]" title="test">
<img src="images/1.jpg" alt="" title="test" />
</a>
</li>
</ul>
If the caption won't work afterwards, please make sure you enabled them in the settings of Rhinoslider.
If they still won't work try to set the captions manually: http://rhinoslider.com/tricks/html-captions/