How do I create an oval around text in CSS?

By : altoids
Source: Stackoverflow.com
Question!

I need to create the image below using css.
enter image description here But this is what I get
enter image description here Everytime you hover over an image the overlay disappears, which I've done.
But the middle image contains text with an oval around it (Shop Now) and I can't get the oval to be positioned correctly.

Here's my fiddle: https://jsfiddle.net/9f6xat3f/1/

Here's some of the css I have:

.trending-button1{  
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    width: 200px;
    height: 50px;
    }

    /*banner overlay*/
    div.homepage-popular-categories {
      position: relative;
      display: inline-block;
    }

    div.homepage-popular-categories p {
      margin: 0;
      /*display: block;*/
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      color: #eeeeec;
      background: rgba(0,0,0,0.5);
      transition: opacity 0.5s;
      opacity: 1;
      text-align: center;
      font-family: sans-serif;
      font-size: 1.2em;
      font-weight: bold;
    }

    div.homepage-popular-categories p:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    div.homepage-popular-categories p:hover {
      background: rgba(0,0,0,0);
    }
    /*end banner overlay*/


    .new-arrivals{  
      background:url('https://s-media-cache-ak0.pinimg.com/originals/4f/a9/d1/4fa9d18c567a8c5a05997a9773685361.jpg') no-repeat; 
      width:313px;  
      height:313px;
    }

    .trending{
      background:url('http://socialmediaoutcomes.com/go/wp-content/uploads/2013/08/successful-business-people-smiling.jpg') no-repeat;  
      width:313px;  
      height:313px;

    }

    .shop-by-goal{
      background:url('https://brianpshea.files.wordpress.com/2013/06/4234255-group-of-business-people-smiling-together-in-an-office.jpg') no-repeat;    
      width:313px;  
      height:313px;

    }


    .strov-3-banners{   
        margin-top:15px;    
        text-align: center; 
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box;    
        -ms-box-sizing: border-box; 
        -o-box-sizing: border-box;    
        box-sizing: border-box;    
        padding:10px 0;
    }

How do I get the the oval to be positioned correctly?

By : altoids


Answers

I made some changes to css , but you can make more. Why you style three times the boxes with height 313 and width 313 just add a class with same css attributes.

.box { width:313px;height:313px;}

Take a look at this jsfiddle forked from you.

I reset the animations on hover but you can put it back.

Look at this Jsfiddle



Just a few amendments needed for div.homepage-popular-categories p selectors.

div.homepage-popular-categories p {
    position: absolute;
    color: #eeeeec;
    background: rgba(0,0,0,0.5);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    max-height: 20px;
    margin: auto;
    left: 0;
    right: 0;
}

Re-aligned Button:

.trending-button1{	
border-radius: 25px;
border: 3px solid #fff;
padding: 20px;
width: 200px;
height: 50;
}

/*banner overlay*/
div.homepage-popular-categories {
  position: relative;
  display: inline-block;
}

div.homepage-popular-categories p {
    position: absolute;
    color: #eeeeec;
    background: rgba(0,0,0,0.5);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    max-height: 20px;
    margin: auto;
    left: 0;
    right: 0;
}

div.homepage-popular-categories p:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
div.homepage-popular-categories p:hover {
  background: rgba(0,0,0,0);
}
/*end banner overlay*/


.new-arrivals{	
  background:url('https://s-media-cache-ak0.pinimg.com/originals/4f/a9/d1/4fa9d18c567a8c5a05997a9773685361.jpg') no-repeat;	
  width:313px;	
  height:313px;
}

.trending{
  background:url('http://socialmediaoutcomes.com/go/wp-content/uploads/2013/08/successful-business-people-smiling.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}

.shop-by-goal{
  background:url('https://brianpshea.files.wordpress.com/2013/06/4234255-group-of-business-people-smiling-together-in-an-office.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}


.strov-3-banners{	
	margin-top:15px;	
	text-align: center;	
	-webkit-box-sizing: border-box;	
	-moz-box-sizing: border-box;	
	-ms-box-sizing: border-box;	
	-o-box-sizing: border-box;    
	box-sizing: border-box;    
	padding:10px 0;
}
<a href="#">
  <div class="grid12-4 banner strov-3-banners shop-by-goal homepage-popular-categories ">
    <p>SHOP BY GOAL</p>
  </div>
</a>

<a href="#">
  <div class="grid12-4 banner strov-3-banners trending homepage-popular-categories ">
    <p>Shop Now</p>
    <p class="trending-button1">TRENDING </p>
  </div>
</a>


<a href="#">
  <div class="grid12-4 banner strov-3-banners new-arrivals homepage-popular-categories ">
    <p>NEW ARRIVALS</p>
  </div>
</a>

Updated Fiddle: https://jsfiddle.net/vct6dsu6/13/


Fullcover overlay code snippet example:

div.homepage-popular-categories .trending-button1 {
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: 65px;
    margin: auto;
    box-sizing: border-box;
    max-width: 200px;
}

/*banner overlay*/
div.homepage-popular-categories {
  position: relative;
  display: inline-block;
}

div.homepage-popular-categories p {
    position: absolute;
    color: #eeeeec;
    background: rgba(0,0,0,0.5);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
}

div.homepage-popular-categories p:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
div.homepage-popular-categories:hover p {
    background: rgba(0,0,0,0);
}
/*end banner overlay*/


.new-arrivals{	
  background:url('https://s-media-cache-ak0.pinimg.com/originals/4f/a9/d1/4fa9d18c567a8c5a05997a9773685361.jpg') no-repeat;	
  width:313px;	
  height:313px;
}

.trending{
  background:url('http://socialmediaoutcomes.com/go/wp-content/uploads/2013/08/successful-business-people-smiling.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}

.shop-by-goal{
  background:url('https://brianpshea.files.wordpress.com/2013/06/4234255-group-of-business-people-smiling-together-in-an-office.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}


.strov-3-banners{	
	margin-top:15px;	
	text-align: center;	
	-webkit-box-sizing: border-box;	
	-moz-box-sizing: border-box;	
	-ms-box-sizing: border-box;	
	-o-box-sizing: border-box;    
	box-sizing: border-box;    
	padding:10px 0;
}
<a href="#">
  <div class="grid12-4 banner strov-3-banners shop-by-goal homepage-popular-categories ">
    <p>SHOP BY GOAL</p>
  </div>
</a>

<a href="#">
  <div class="grid12-4 banner strov-3-banners trending homepage-popular-categories ">
    <p>Shop Now</p>
    <p class="trending-button1">TRENDING </p>
  </div>
</a>


<a href="#">
  <div class="grid12-4 banner strov-3-banners new-arrivals homepage-popular-categories ">
    <p>NEW ARRIVALS</p>
  </div>
</a>

I'm not entirely sure what you plan on doing with the hover effects, so I'll leave that up to you to refine, but the snippet below will provide some examples to consider.


Overlay hover effects

Reveal and remove alternative on-hover demonstrations.

div.homepage-popular-categories .trending-button1 {
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: 65px;
    margin: auto;
    box-sizing: border-box;
    max-width: 200px;
    background: transparent;
}

/*banner overlay*/
div.homepage-popular-categories {
  position: relative;
  display: inline-block;
}

div.homepage-popular-categories p {
    position: absolute;
    color: #eeeeec;
    background: rgba(0,0,0,0.5);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
}

div.homepage-popular-categories p:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
div.homepage-popular-categories:hover p {
    background: rgba(0,0,0,0);
}
/*end banner overlay*/


.new-arrivals{	
  background:url('https://s-media-cache-ak0.pinimg.com/originals/4f/a9/d1/4fa9d18c567a8c5a05997a9773685361.jpg') no-repeat;	
  width:313px;	
  height:313px;
}

.trending{
  background:url('http://socialmediaoutcomes.com/go/wp-content/uploads/2013/08/successful-business-people-smiling.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}

.shop-by-goal{
  background:url('https://brianpshea.files.wordpress.com/2013/06/4234255-group-of-business-people-smiling-together-in-an-office.jpg') no-repeat;	
  width:313px;	
  height:313px;
  
}


.strov-3-banners{	
	margin-top:15px;	
	text-align: center;	
	-webkit-box-sizing: border-box;	
	-moz-box-sizing: border-box;	
	-ms-box-sizing: border-box;	
	-o-box-sizing: border-box;    
	box-sizing: border-box;    
	padding:10px 0;
}

/* On Hover Overlay Remove */
div.homepage-popular-categories.overlay-remove .trending-button1 {
    margin-bottom: 50px;
}

div.homepage-popular-categories.overlay-remove:hover .trending-button1 {
    margin-bottom: -150px;
}

div.homepage-popular-categories.overlay-remove {
    overflow: hidden;
}

div.homepage-popular-categories.overlay-remove:hover p {
    color: transparent;
}

/* On Hover Overlay Reveal */
div.homepage-popular-categories.overlay-reveal:hover p {
    background: rgba(0,0,0,0.5);
    color: #eeeeec;
}

div.homepage-popular-categories.overlay-reveal p {
    position: absolute;
    color: transparent;
    background: rgba(0,0,0,0);
    transition: .5s;
    opacity: 1;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    top: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
}

div.homepage-popular-categories.overlay-reveal .trending-button1 {
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: 65px;
    margin: auto;
    box-sizing: border-box;
    max-width: 200px;
    margin-bottom: -150px;
}

div.homepage-popular-categories.overlay-reveal:hover .trending-button1 {
    margin-bottom: 50px;
    background: transparent;
}

div.homepage-popular-categories.overlay-reveal {
    overflow: hidden;
}
<h2>Overlay Remove</h2>
<a href="#">
  <div class="grid12-4 banner strov-3-banners shop-by-goal homepage-popular-categories overlay-remove">
    <p>SHOP BY GOAL</p>
  </div>
</a>

<a href="#">
  <div class="grid12-4 banner strov-3-banners trending homepage-popular-categories overlay-remove">
    <p>Shop Now</p>
    <p class="trending-button1">TRENDING </p>
  </div>
</a>


<a href="#">
  <div class="grid12-4 banner strov-3-banners new-arrivals homepage-popular-categories overlay-remove">
    <p>NEW ARRIVALS</p>
  </div>
</a>

<hr>
<h2>Overlay Reveal</h2>
<a href="#">
  <div class="grid12-4 banner strov-3-banners shop-by-goal homepage-popular-categories overlay-reveal">
    <p>SHOP BY GOAL</p>
  </div>
</a>

<a href="#">
  <div class="grid12-4 banner strov-3-banners trending homepage-popular-categories overlay-reveal">
    <p>Shop Now</p>
    <p class="trending-button1">TRENDING </p>
  </div>
</a>


<a href="#">
  <div class="grid12-4 banner strov-3-banners new-arrivals homepage-popular-categories overlay-reveal">
    <p>NEW ARRIVALS</p>
  </div>
</a>



that would change the height of your box and align it center

    .trending-button1{  
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    width: 200px;
    max-height: 20px;
    margin:0 auto;
    }
By : kdskii


This video can help you solving your question :)
By: admin