Jump to content
Sign in to follow this  
SwartHack

Bootstrap 3 - override the a:hover HoverScale of a thumbnail from HTM

Recommended Posts

Greetings classmates! School is in session.
It seems this is mostly a CSS question.
So my apologies for any re-tread. I have seen numerous posts addressing similar, but can't seem to put it together.
Any help or direction to existing solutions is greatly appreciated.
I am Developing an ASP.NET/MVC5 web app. It uses bootstrap 3.
I am new to bootstrap and never really got into CSS more than the basics.
Question: How can I change/override the a:hover of a thumbnail to include a user-defined hoverscale?
So in the thumbnail.less file I see:
@thumbnailHoverScale : 1.3;
.
.
.
a:hover img.thumbnail { 
    .selected(@thumbnailHoverScale);
}
HoverScale is not a style attribute it seems so I can't override in standard local definition HTML style="..."!?!
I do understand I can define a <style/> in local HTML to override, but again fail to comprehend exactly how.
Here is my HTML:
<div id="thumbnailContainer">
    <div class="thumbnail-loading-spinner"></div>
    <ul id="thumbnails" data-bind='template: {name:"thumbnailsTemplate", foreach: thumbnails}'></ul>
    <div class="admin"></div>
</div>
and the template:
<script id='thumbnailsTemplate' type="text/x-jquery-tmpl">
    <li>
        <a href="${Url}" data-vpath="${VPath}">
            <img class="thumbnail" src="${UrlThumbnail}" />
        </a>
    </li>
</script>
So basically in the template, I want to override hoverscale just for just the generated thumbs.
I have tried a number of style="" property definitions, then realized HoverScale is not a property.
I also tried a number of variations like:
...class="thumbnail {HoverScale:2}"

 

I think I am close on this one, possibly, but not sure how I would apply it to just the generated thumbs??

<style>
    a.thumbnail:hover { 
    .selected(3)
}
</style>
with no joy.
Anyone? Thanks!
Cheers!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...