Question

I’m working in MVC 3/Razor on a web app for a daily newspaper. I have a partial view that is loading stories as they are posted to the site. What I need to do is have the container that holds each story’s content to change on hover. Here is the code I’ve been given:

<div id="storyboard">
@foreach (var box in Model.Stories)
{
    <a class="storybox" href="@Url.Action("Story", new { storyID = box.StoryEventID })">
        <div class="storybox-headline">
            @box.Name
        </div>
        <div class="storybox-byline">
            @box.ByLine
        </div>
            @if (box.Photo != null)
            {
                <div class="storybox-photo">
                    @Html.ImageForExtLink(box.Photo, ImageDimensions.Size.Medium)
                </div>
            }
        <div class="storybox-date">
            Added on @box.StoryAdded
        </div>
    </a>
}    

And the CSS:

.storybox { width: 220px; padding: 10px 10px 10px 10px; font-size: 11px; background-color: #ffffff; box-shadow: 0 1px 3px rgba(34,25,25,0.4); -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4); -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4); }

.storybox-headline { font-size: 1.5em; color: #666666; font-weight: bold; text-align: center; }

.storybox-byline { color: #999999; text-align: center; line-height: 1em; border-bottom: 1px solid #e5e5e5; padding-bottom: 3px; }

.storybox-photo { position: relative; max-width: 192px; margin-top: 5px; margin-left: auto; margin-right: auto; }

.storybox-date { color: #999999; line-height: 1.2em; }

I’m looking for the best way to put a colored screen that says “view” over the .storybox div when the mouse hovers over it. I can change the background color, but I need the image and text to fade out as well. I tried using .storybox:hover *, which changes the background color of all the divs, but doesn’t fade out the image or change color on the .storybox .

Answer 1

Just use the appropriate selectors and properties:

.storybox:hover, .storybox:hover * { 
  background-color: #f90;  
  color: #f90;
}

.storybox:hover .storybox-photo {
  visibility: none;
}

If you want to animate the hover without javascript (no < IE9 support), but degrades gracefully:

.storybox, .storybox * { 
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -ms-transition: all 500ms ease; /*IE10*/
  transition: all 500ms ease;
}

.storybox:hover, .storybox:hover * { 
  background-color: #f90;  
  color: #f90;
}

.storybox:hover .storybox-photo {
  opacity: 0;
}