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-08 13:04:47Z

1

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>

edited Jan 8, 2018 at 13:04

answered Jan 8, 2018 at 12:43

Alexis Vandepitte

2,0882 gold badges15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Temani Afif Over a year ago

it's recommended to use double quote(") instead of simple(') in html. : where i can read about this recommendation :)

Alexis Vandepitte Over a year ago

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 <input value="i'm the value" />

Temani Afif Over a year ago

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]

Alexis Vandepitte Over a year ago

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.

Temani Afif · Accepted Answer · 2018-01-08 12:47:13Z

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>

Collectives™ on Stack Overflow

CSS gradient effect

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related