CODEWITHSUNDEEP
jqueryhtmlcss
user6930268
user6930268

Reputation:

How to hide text after hover using css?

I have to hide text after hover on section. I have to display full circle image and after hover to hide "Profile name" and "Designation".It should be display only image and visit profile button.i am getting below result.Would you help me in this? enter image description here Need result like this

enter image description here 

.white-color-bg
{
    background-color:  #ffffff ;
    text-align: center;
    padding: 10px;
     position: relative;
  float: left;
  margin: 2%;
  overflow: hidden;
  width: 100%;
}

.white-color-bg:hover .item-overlay.right {
  right: 0;
  left: 0;
}

.teacher-circle img
{
    width: 135px;
    border-radius: 50%;
    position: relative;
    bottom: 50px;
    box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
    border: 2px solid #fff;
    background: #fff;
    z-index: 2;
}
.cursor-pointer
{
    cursor: pointer;
}

.item-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  
  background: rgba(0,0,0,0.5);
  color: #fff;
  overflow: hidden;
  text-align: center;
  /* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */
  width: 100%; 
  
  -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.item-overlay.right {
  right: 200%;
  left: -100%;
}
.item-overlay a{
    position: absolute;
    bottom: 30px;
    margin-left:-50px;

}

.white-color-bg h2
{
    font-family: 'Prompt', sans-serif;
    font-size: 400;
    font-size: 16px;
    
}

.white-color-bg h3
{
    font-size: 14px;
    font-family: 'Prompt', sans-serif;
    font-size: 400;
    color: #e74c3c !important;


}
.white-color-bg h2, .white-color-bg h3
{
    position: relative;
    bottom: 20px;
    line-height: 0;
    color: #000;
    z-index: 0;
}

.btn-profile
{
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 05px 20px;
    border-radius: 05px;
    font-size: 16px;
    text-transform: capitalize;
    z-index: 3;
}

.btn-profile:hover
{
    background-color:#ffffff;
    color: #e74c3c; 
}
<div class="container">
    <div class="row">

     <div class="col-md-4">
            <div class="white-color-bg teacher-circle cursor-pointer">
              <img src="http://cdn.leanincircles.org/ui/modules/common/images/notification-icon.png?v=2" >
              <div class="item-overlay right">
                    <a href="#" class="btn-profile">visit profile</a>
              </div>
              <h2>Profile name</h2>
              <h3>Designation</h3>
            </div>
        </div>
        </div>
        </div>

Upvotes: 0

Views: 1815

Answers (4)

user6836255
user6836255

Reputation:

First wrap the content to hide in a div element 

<div id="hide" class="center">
   <h2>Profile name</h2>
   <h3>Designation</h3>
</div>

give opacity:0; to the #hide element in css

#hide{
            bottom: 0;
            position: absolute;

}

place the img outside of the parent element

 <img src="http://cdn.leanincircles.org/ui/modules/common/images/notification-icon.png?v=2" class="center">


<div class="white-color-bg teacher-circle cursor-pointer">



change position:absolute; and adjust the top and bottom to place it: (Use Percentage!)



To center the element use .center class

.center{
            left:50%;
            transform: translateX(-50%);
}




<!doctype html>
<html>


<body>
    <style>
        .white-color-bg {
            background-color: #ffffff;
            text-align: center;
            padding: 10px;
            height:200px;
            position: relative;
            float: left;
            margin: 2%;
            overflow: hidden;
            width: 100%;
            margin-top: 100px;
        }
        
        .white-color-bg:hover .item-overlay.right {
            right: 0;
            left: 0;
        }
        
        img {
            width: 135px;
            border-radius: 50%;
            position: absolute;
            bottom: 50px;
            box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
            border: 2px solid #fff;
            background: #fff;
            z-index: 2;
            top: 50px;
            
        }
            
        .center{
            left:50%;
            transform: translateX(-50%);
        }
        .cursor-pointer {
            cursor: pointer;
        }
        
        .item-overlay {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            overflow: hidden;
            text-align: center;
            /* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */
            width: 100%;
            -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
            -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
            transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
        }
        
        .item-overlay.right {
            right: 200%;
            left: -100%;
        }
        
        .item-overlay a {
            position: absolute;
            bottom: 30px;
            margin-left: -50px;
        }
        
        .white-color-bg h2 {
            font-family: 'Prompt', sans-serif;
            font-size: 400;
            font-size: 16px;
        }
        
        .white-color-bg h3 {
            font-size: 14px;
            font-family: 'Prompt', sans-serif;
            font-size: 400;
            color: #e74c3c !important;
        }
        
        .white-color-bg h2,
        .white-color-bg h3 {
            position: relative;
            bottom: 20px;
            line-height: 0;
            color: #000;
            z-index: 0;
        }
        
        .btn-profile {
            border: 2px solid #ffffff;
            color: #ffffff;
            padding: 5px 20px;
            border-radius: 5px;
            font-size: 16px;
            position: absolute;
            text-transform: capitalize;
            z-index: 2;
          left:60%;
        }
      
        
        .btn-profile:hover {
            background-color: #ffffff;
            color: #e74c3c;
        }
        .white-color-bg:hover > #hide {
            opacity:0;
        }
        #hide{
            bottom: 0;
            position: absolute;
            
        }
    </style>

    <div class="container">
        <div class="row">

            <div class="col-md-4">
                <img src="http://cdn.leanincircles.org/ui/modules/common/images/notification-icon.png?v=2" class="center">
                    
                <div class="white-color-bg teacher-circle cursor-pointer">
                    
                    
                    <div class="item-overlay right">
                        
                        <a href="#" class="btn-profile center">visit profile</a>
                    </div>
                    <div id="hide" class="center">
                        <h2>Profile name</h2>
                        <h3>Designation</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

To achieve this you can set the visibility of the h2 and h3 elements to hidden on hover of the .white-color-bg element. Try this:

.white-color-bg:hover h2,
.white-color-bg:hover h3 {
  visibility: hidden;
}


.white-color-bg {
  background-color: #ffffff;
  text-align: center;
  padding: 10px;
  position: relative;
  float: left;
  margin: 2%;
  overflow: hidden;
  width: 100%;
}
.white-color-bg:hover {
  overflow: visible;
}
.white-color-bg:hover .item-overlay.right {
  right: 0;
  left: 0;
}
.white-color-bg:hover h2,
.white-color-bg:hover h3 {
  visibility: hidden;
}
.teacher-circle img {
  width: 135px;
  border-radius: 50%;
  position: relative;
  bottom: 50px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
  background: #fff;
  z-index: 2;
}
.cursor-pointer {
  cursor: pointer;
}
.item-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  overflow: hidden;
  text-align: center;
  /* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */
  width: 100%;
  -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.item-overlay.right {
  right: 200%;
  left: -100%;
}
.item-overlay a {
  position: absolute;
  bottom: 30px;
  margin-left: -50px;
}
.white-color-bg h2 {
  font-family: 'Prompt', sans-serif;
  font-size: 400;
  font-size: 16px;
}
.white-color-bg h3 {
  font-size: 14px;
  font-family: 'Prompt', sans-serif;
  font-size: 400;
  color: #e74c3c !important;
}
.white-color-bg h2,
.white-color-bg h3 {
  position: relative;
  bottom: 20px;
  line-height: 0;
  color: #000;
  z-index: 0;
}
.btn-profile {
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 05px 20px;
  border-radius: 05px;
  font-size: 16px;
  text-transform: capitalize;
  z-index: 3;
}
.btn-profile:hover {
  background-color: #ffffff;
  color: #e74c3c;
}
<div class="container">
  <div class="row">

    <div class="col-md-4">
      <div class="white-color-bg teacher-circle cursor-pointer">
        <img src="http://cdn.leanincircles.org/ui/modules/common/images/notification-icon.png?v=2">
        <div class="item-overlay right">
          <a href="#" class="btn-profile">visit profile</a>
        </div>
        <h2>Profile name</h2>
        <h3>Designation</h3>
      </div>
    </div>
  </div>
</div>

Upvotes: 3

vijayP
vijayP

Reputation: 11502

This is continuation to @RoryMcCrossan's answer. I just modified few bottom css properties to show the full circular image. I hope you want it that way only:

Updated: to set top:50px; for overlay div. 

.white-color-bg {
  background-color: #ffffff;
  text-align: center;
  padding: 10px;
  position: relative;
  float: left;
  margin: 2%;
  overflow: hidden;
  width: 100%;
}
.white-color-bg:hover .item-overlay.right {
  right: 0;
  left: 0;
  top:50px;
}
.white-color-bg:hover h2,
.white-color-bg:hover h3 {
  visibility: hidden;
}
.teacher-circle img {
  width: 135px;
  border-radius: 50%;
  position: relative;
  /*bottom: 50px;*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
  background: #fff;
  z-index: 2;
}
.cursor-pointer {
  cursor: pointer;
}
.item-overlay {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  overflow: hidden;
  text-align: center;
  /* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */
  width: 100%;
  -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.item-overlay.right {
  right: 200%;
  left: -100%;
}
.item-overlay a {
  position: absolute;
  bottom: 17px; /* bottom: 30px;*/
  margin-left: -50px;
}
.white-color-bg h2 {
  font-family: 'Prompt', sans-serif;
  font-size: 400;
  font-size: 16px;
}
.white-color-bg h3 {
  font-size: 14px;
  font-family: 'Prompt', sans-serif;
  font-size: 400;
  color: #e74c3c !important;
}
.white-color-bg h2,
.white-color-bg h3 {
  position: relative;
  /*bottom: 20px;*/
  line-height: 0;
  color: #000;
  z-index: 0;
}
.btn-profile {
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 05px 20px;
  border-radius: 05px;
  font-size: 16px;
  text-transform: capitalize;
  z-index: 3;
}
.btn-profile:hover {
  background-color: #ffffff;
  color: #e74c3c;
}
<div class="container">
  <div class="row">

    <div class="col-md-4">
      <div class="white-color-bg teacher-circle cursor-pointer">
        <img src="http://cdn.leanincircles.org/ui/modules/common/images/notification-icon.png?v=2">
        <div class="item-overlay right">
          <a href="#" class="btn-profile">visit profile</a>
        </div>
        <h2>Profile name</h2>
        <h3>Designation</h3>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Nitya Kumar
Nitya Kumar

Reputation: 968

.white-color-bg
{
    background-color:  #ffffff ;
    text-align: center;
    padding: 10px;
     position: relative;
  float: left;
  margin: 2%;
  overflow: hidden;
  width: 100%;
  
}
.white-color-bg:hover h2,
.white-color-bg:hover h3 {
  visibility: hidden;
}
.white-color-bg:hover .item-overlay.right {
  right: 0;
  left: 0;
}

.teacher-circle img
{
    width: 135px;
    border-radius: 50%;
    position: relative;
    bottom: 50px;
    box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
    border: 2px solid #fff;
    background: #fff;
    z-index: 2;
}
.cursor-pointer
{
    cursor: pointer;
}

.item-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  
  background: rgba(0,0,0,0.5);
  color: #fff;
  overflow: hidden;
  text-align: center;
  /* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */
  width: 100%; 
  
  -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.item-overlay.right {
  right: 200%;
  left: -100%;
}
.item-overlay a{
    position: absolute;
    bottom: 30px;
    margin-left:-50px;

}

.white-color-bg h2
{
    font-family: 'Prompt', sans-serif;
    font-size: 400;
    font-size: 16px;
    
}

.white-color-bg h3
{
    font-size: 14px;
    font-family: 'Prompt', sans-serif;
    font-size: 400;
    color: #e74c3c !important;


}
.white-color-bg h2, .white-color-bg h3
{
    position: relative;
    bottom: 20px;
    line-height: 0;
    color: #000;
    z-index: 0;
}

.btn-profile
{
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 05px 20px;
    border-radius: 05px;
    font-size: 16px;
    text-transform: capitalize;
    z-index: 3;
}

.btn-profile:hover
{
    background-color:#ffffff;
    color: #e74c3c; 
}
<div class="container">
    <div class="row">

     <div class="col-md-4">
            <div class="white-color-bg teacher-circle cursor-pointer">
              <img src="http://cdn.leanincircles.org/ui/modules/common/images/notification-icon.png?v=2" >
              <div class="item-overlay right">
                    <a href="#" class="btn-profile">visit profile</a>
              </div>
              <h2>Profile name</h2>
              <h3>Designation</h3>
            </div>
        </div>
        </div>
        </div>

Upvotes: 0

Related Questions