Jump to content

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 { 
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>
and the template:
<script id='thumbnailsTemplate' type="text/x-jquery-tmpl">
        <a href="${Url}" data-vpath="${VPath}">
            <img class="thumbnail" src="${UrlThumbnail}" />
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??

    a.thumbnail:hover { 
with no joy.
Anyone? Thanks!
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...