Bootstrap 3 - override the a:hover HoverScale of a thumbnail from HTM in CSS Posted April 9, 2016 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!
Bootstrap 3 - override the a:hover HoverScale of a thumbnail from HTM
in CSS
Posted
@thumbnailHoverScale : 1.3; . . . a:hover img.thumbnail { .selected(@thumbnailHoverScale); }<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><script id='thumbnailsTemplate' type="text/x-jquery-tmpl"> <li> <a href="${Url}" data-vpath="${VPath}"> <img class="thumbnail" src="${UrlThumbnail}" /> </a> </li> </script>...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>