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!