CSS gradient effect

Question

I have a div which has an image as the background and some text over it in an other div. Here is the HTML

    .profilePic{
     width:190px;
     height: 190px;
     border-radius: 50%;
     background: #FFF;
     float: left;
     margin:12px;
     background: #ededed;
        background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
    }
    .profilePic:hover{
     -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
        color:#FFF;
    }
    .name{
     font-family: Tahoma;
     font-size: 1.5em;
     color: red;
     margin-top: 42%;
     display: none;
    }
    .profilePic:hover .name {
        display:block;
    }

    <div class='profilePic one'>
     <center>
     <div class='name'>Name</div>
        </center>
    </div>

With this code, when I hover on the div named profilePic, the div gets a filter applied on top of it. I dont what the filter on the text, i.e, the div named name but only on the profilePic div. How can I do it?

Alexis Vandepitte · Accepted Answer · 2018-01-08T13:04:47.437

You need to separate the text from the picture.

Use a container div with a div inside that has the image with background-image.
Use another div inside to display the text
Apply all the effect on container hover
DO NOT use margin-top in percentage but instead, if you want to center the text, add position:relative; to the container and this to the text:
- position: absolute; to positioned it.
- top: 50%; to place it at 50% of the left
- left: 50%; to place it at 50% of the top
- transform: translate(-50%, -50%); to pull it at 50% of its width and height to the left and top because when you do left: 50%: for example, it will put the left border of the element at 50% and not the middle of it. So you need to pull it left a 50% of its proper width to have it horizontally centered according to its parent.

    .profilePic{
        display: inline-block;
     width:190px;
     height: 190px;
     border-radius: 50%;
     background: #FFF;
     margin:12px;
     background: #ededed;
        background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
    }
    .profilePicContainer {
         position: relative;
         display: inline-block;
    }

    .profilePicContainer:hover .profilePic{
     -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
        color:#FFF;
    }

    .profilePicContainer:hover .name { 
        display: block;
    }

    .name{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
     font-family: Tahoma;
     font-size: 1.5em;
     color: red;
     display: none;
    }

    <div class="profilePicContainer one">
     <div class="profilePic"></div>
     <div class="name">Name</div>
    </div>

`it's recommended to use double quote(") instead of simple(') in html.` : where i can read about this recommendation :) — Temani Afif, Jan 08 '18 at 12:49
It's just a convention, maybe different for some people, but in most cases i see double quotes for html and simple quotes for js and php for example, or if you have — Alexis Vandepitte, Jan 08 '18 at 12:55
so it's not a recommendation ;) convention and recommendation are different i guess ... by saying this you mean that it's bad to use single quote and this may create confusion especially from new developer [personally i was coding since a while and never pay attention to quotes when writing HTML/CSS/PHP/JS, etc you simply need to pay attention to what you write inside] — Temani Afif, Jan 08 '18 at 13:00
you're right, there is no difference between single or double quotes, i learned it this way so it looks awkward when i see it with simple quote. I'll edit my answer and remove it. Thank's for your comment. — Alexis Vandepitte, Jan 08 '18 at 13:04

Temani Afif · Answer 2 · 2018-01-08T12:47:13.623

You can use a pseudo-element as an overlay above the background and below the text and apply CSS on it. Doing this you will only affect the background and not the text.

Here is an example where the overlay will also contain the same background image with the filter applied on it and I simply show it on hover:

.profilePic {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #FFF;
  float: left;
  text-align:center;
  margin: 12px;
  background: #ededed;
  position:relative;
  overflow:hidden;
  background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
}
.profilePic:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
  transition:0.5s;
  filter:grayscale(100%);
  opacity:0;
}
.profilePic:hover::before {
  opacity:1;
}
.profilePic:hover {
  color: #fff
}

.name {
  font-family: Tahoma;
  font-size: 1.5em;
  color: red;
  margin-top: 42%;
  display: none;
  position:relative;
  z-index:1;
}

.profilePic:hover .name {
  display: block;
}

<div class='profilePic one'>
  <div class='name'>Name</div>
</div>

You can also simply use a background color with opacity:

.profilePic {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #FFF;
  float: left;
  text-align:center;
  margin: 12px;
  background: #ededed;
  position:relative;
  overflow:hidden;
  background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
}
.profilePic:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  transition:0.5s;
}
.profilePic:hover::before {
  background:rgba(0,0,0,0.7);
}
.profilePic:hover {
  color: #fff
}

.name {
  font-family: Tahoma;
  font-size: 1.5em;
  color: red;
  margin-top: 42%;
  display: none;
  position:relative;
  z-index:1;
}

.profilePic:hover .name {
  display: block;
}

<div class='profilePic one'>
  <div class='name'>Name</div>
</div>

CSS gradient effect

2 Answers2