AlexGH AlexGH - 19 days ago 5
CSS Question

Adjust thumbnail area to image and text

I'm using

thumbnail class
in my view, but I need to reduce the
thumbnail
area exactly to fit just my image and text, how can I do that? This is my code:

<div class="row">
<div class="col-xs-6 col-md-6">
<a href="#" class="thumbnail thumbnailBorder" style="background-color:red">
<img src="~/LIGAppsForWebsite/@item" style="height:133px; width:213px;" alt="@temp">
@temp
</a>
</div>
</div>


This is what is happening now:
enter image description here

And I would like to get something like this even if
background-color:red
for
class:thumbnail
is set:
enter image description here

How can I do that?

EDIT

I don't want the cursor handle to display when I'm hovering above the red surface, I just want it to display when I'm hovering above the image and text

Answer

Try this:

HTML:

<div class="row">
    <div class="col-xs-6 col-md-6">               
        <a href="#" class="thumbnail thumbnailBorder">
            <img src="~/LIGAppsForWebsite/@item" alt="@temp">
            <p>Image Text</p>
        </a> 
    </div>
</div>

CSS:

.thumbnail {
    width: 213px;
    display: block;
    margin: 0 auto;
    padding: 0;
}

.thumbnail:hover {
    background-color:red;
}

.thumbnail img {
    width: 213px;
    height: 133px;
}

.thumbnail p {
    margin: 10px 0;
    text-align: center;
}

Demo: jsfiddle

Note: HTML5 accepts nested tags in anchor elements without breaking validation