如何在CSS中创建文本周围的椭圆？

Question

我需要使用css创建下面的图像。
但这就是我得到的 每当你将鼠标悬停在图像上时，叠加层就会消失，我已经完成了。
但是中间的图像包含一个带有椭圆形的文本（立即购买），我无法正确定位椭圆。

这是我的小提琴： https://jsfiddle.net/9f6xat3f/1/

这是我的一些css：

.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;
    }

如何正确定位椭圆？

Answer 1

这会改变你的盒子的高度并将其对齐

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

Answer 2

div.homepage-popular-categories p选择器需要进行一些修改。

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;
}

重新对齐按钮

.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>

更新小提琴： https://jsfiddle.net/vct6dsu6/13/

<小时/> Fullcover重叠式代码段示例：

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>

我不完全确定您计划使用悬停效果，所以我会将其留给您进行改进，但下面的代码段会提供一些示例供您考虑。

<小时/> 叠加悬停效果

显示并删除其他悬停式演示。

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>

Answer 3

我对css进行了一些更改，但你可以做更多。为什么你将高度为313和宽度为313的盒子设置为三次，只需添加一个具有相同css属性的类。

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

看看你分散的这个jsfiddle。

我在悬停时重置了动画，但你可以把它放回去。

Look at this Jsfiddle