We help IT Professionals succeed at work.

Putting this CSS animation when hover on the whole column

Low Priority
153 Views
Last Modified: 2018-06-21
I'm trying to customize this template. Support has not been really useful.  I replaced those links with "xxx"

On the section course categories there is some columns.

<div class="col-xs-12 col-md-4 teaser_border teaser_border_column_11">
        <div class="teaser text-center  h5">
                <div class="teaser_image">
            <img src="xxx">
        </div>
                    <h5>
                    <a href="rainbow-colleges/course-category/creative-arts/">
                Creative ARts &amp; Media                   </a>
                </h5>
                    <p>
            Explore film, journalism, photography or theatre, music. Learn from the experts
 in creative arts and media...      </p>
                    </div>

        </div>
So let's say I want the whole column to hover when the cursor is on and I also want put a link on the img. which hovers too

HTML

<div class="col-xs-12 col-md-4 teaser_border teaser_border_column_11">
        <div class="teaser text-center  h5">


<div class="teaser_image"><a href="http://rainbow-colleges/course-category/creative-arts/">
        <img src="xxx">
    </div>
                <h5>
                <a href="http://rainbow-colleges/course-category/creative-arts/">
            Creative ARts &amp; Media                   </a>
            </h5>
                <p>
        Explore film, journalism, photography or theatre, music. Learn
        from the experts
         in creative arts and media...      </p>
                </div>

    </div>
CSS:

.col-md-4:hover {

opacity:0.7;

}



.col-md-4:hover a {

color:#34c663;

transition:0,000002s;

}
But how do I make sure the image with the link doesn't hover twice (with the colum hover and img hover)

Also I found the code of the underline but i'm not sure how to put it to show when the hover is on the whole colum or when you put the cursor or the image:

.teaser h2 a:after, .teaser h3 a:after, .teaser h4 a:after, .teaser h5 a:after {
    background-color: #34c663;
    content: '';
    margin: 0 auto;
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    text-align: center;
    transition: width .3s;
    width: 0;
}
Comment
Watch Question

Juana VillaFront-end Developer
CERTIFIED EXPERT

Commented:
Hi Juan,
If I understand your question properly, you will like to have a column hover that does not affect the <a> tag.

1. Column hover | Add a hover to each element except the <a> tag.
.col-md-4:hover .teaser_image,
.col-md-4:hover p {
    opacity: .7;
}

Open in new window


2. Hover on link | Underline effect when hovering the <a> tag itself.
.teaser a:hover{
    color: #34c663;
    text-decoration: none;
    -webkit-transition: all 0.15s linear 0s;
    transition: all 0.15s linear 0s;
}
.teaser a:after{
    background-color: #34c663;
    bottom: -5px;
    content: "";
    height: 2px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    -webkit-transition: width 0.3s;
    transition: width 0.3s;
    width: 0;
}
.teaser a:hover:after {
    width: 50px;
}

Open in new window


3. I would not add a hover to the <a> when hovering the whole column because that will indicate that you can click anywhere. I will suggest, if possible, to move the <a> tag to wrap the whole column and then add the hover.

<div class="col-xs-12 col-md-4 teaser_border teaser_border_column_11">
 <a href="http://rainbow-colleges/course-category/creative-arts/">
  <div class="teaser text-center  h5">
    <div class="teaser_image"><a href="http://rainbow-colleges/course-category/creative-arts/">
      <img src="xxx">
    </div>
     <h5>Creative ARts &amp; Media </h5>
     <p> Explore film, journalism, photography or theatre, music. Learn from the experts in creative arts and media...  </p>
  </div>
  </a>
</div>

Open in new window


.col-md-4 a:hover .teaser_image,
.col-md-4 a:hover p {
    opacity: .7;
}
.col-md-4:hover h5{
    color: #34c663;
    text-decoration: none;
    -webkit-transition: all 0.15s linear 0s;
    transition: all 0.15s linear 0s;
}
.col-md-4 h5:after{
    background-color: #34c663;
    bottom: -5px;
    content: "";
    height: 2px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    -webkit-transition: width 0.3s;
    transition: width 0.3s;
    width: 0;
}
.col-md-4:hover h5:after {
    width: 50px;
}

Open in new window


I hope this helps.

Author

Commented:
Thank you.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.