将背景悬停在标题后面

【问题标题】：Hover background behind title将背景悬停在标题后面
【发布时间】：2020-01-14 23:54:51
【问题描述】：

我正在寻求关于悬停背景的帮助 我希望当鼠标悬停在标题上时背景颜色出现在标题后面。我还希望标题保持固定，以便它出现在悬停上以及不在悬停上时出现，这样您就可以知道画廊图像的标题是什么。我希望颜色不透明度也保持在较轻的不透明度而不是纯色，这样当您将鼠标悬停在图像上时，它会创建一种独特的效果，允许字体和按钮在您将鼠标悬停在它上面时出现。如果我需要发布更多的 html 和 Css，请告诉我，我会发布它。

没有悬停的图像

悬停时的图像 

.view {
  position: relative;
  margin: 10px 0px 10px 10px;
  display: block;
  float: left;
  border: 10px solid #909090;
  overflow: hidden;
  text-align: center;
  background-image: url("../images/over1.jpg");
  border-radius: 50%;
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
  max-width: 30.26%;
	height: 300px;
}

.view .mask,
.view .content {
  overflow: hidden;
  top: 0;
  left: 0
}

.view h2 {
  text-transform: uppercase;
  text-decoration: underline;
  border: 1px solid #000000;
  color: #FFFFFF;
  font-weight: 900;
  text-align: center;
  font-size: 30px;
  padding: 10px;
  background:#000000;
  margin: 50px 0 0 0;
  overflow: hidden;
}

.view p {
 position: relative;
 display: block;
  font-family: Merriweather, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  padding: 0px 10px 0px;
  text-align: center;
  text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;

}

.view a.info {
  font-size: 26px;
  text-decoration: none;
  padding: 10px 10px;
  background: #000;
  color: #fff;
  font-family: Raleway, serif;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
}

.view a.info:hover {
  box-shadow: 0 0 5px #000
}


/*1*/

.view-first img {
  /*1*/
  transition: all 0.2s linear;
}

.view-first .mask  {
 position: relative;
 display: block;
 opacity: 0;
 background-color: rgba(255,0,4,0.57);
 transition: all 0.4s ease-in-out;
 height: 100%; 
	
}

.view-first h2 {
  transform: translateY(1px);
  opacity: 100;
  transition: all 0.2s ease-in-out;
}

}
.view-first p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}

.view-first a.info {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}


/* */

.view-first:hover img {
  transform: scale(1.1);
}

.view-first:hover .mask {
	display: block;
  opacity: 1;
}

.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}

.view-first:hover p {
  transition-delay: 0.1s;
}

.view-first:hover a.info {
  transition-delay: 0.2s;
}

/*Print Design */
.view1 {
  position: relative;
  margin: 10px 0px 10px 10px;
  display: block;
  float: left;
  border: 10px solid #909090;
  overflow: hidden;
  text-align: center;
  background-image: url("../images/over2.jpg");
  border-radius: 50%;
  width: 30.26%;
  height: 300px;
	  -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

.view1 .mask1,
.view1 .content {
  overflow: hidden;
  top: 0;
  left: 0
}

.view1 h2 {
  text-transform: uppercase;
  text-decoration: underline;
  border: 1px solid #000000;
  color: #FFFFFF;
  font-weight: 900;
  text-align: center;
  font-size: 30px;
  padding: 10px;
  background:#000000; 
  margin: 50px 0 0 0
}

.view1 p {
  font-family: Merriweather, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 800;
  position: relative;
  color: #FFFFFF;
  padding: 0px 10px 0px;
  text-align: center;
  text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;

}

.view1 a.info {
  display: inline-block;
  font-size: 26px;
  text-decoration: none;
  padding: 10px 10px;
  background: #000;
  color: #fff;
  font-family: Raleway, serif;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
}

.view1 a.info:hover {
  box-shadow: 0 0 5px #000
}


/*1*/

.view-second img {
  /*1*/
  transition: all 0.2s linear;
}

.view-second .mask1 {
  position: relative;
  opacity: 0;
  background-color: rgba(4,10,255,0.64);
  transition: all 0.4s ease-in-out;
  height: 400px;
}

.view-second h2 {
  transform: translateY(1px);
  opacity: 100;
  transition: all 0.2s ease-in-out;
}

.view-second p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}

.view-second a.info {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}


/* */

.view-second:hover img {
  transform: scale(1.1);
}

.view-second:hover .mask1 {
  opacity: 1;
}

.view-second:hover h2,
.view-second:hover p,
.view-second:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}

.view-second:hover p {
  transition-delay: 0.1s;
}

.view-second:hover a.info {
  transition-delay: 0.2s;
}

/*Package Design */
.view2 {
  position: relative;
  margin: 10px 0px 10px 10px;
  display: block;
  float: left;
  border: 10px solid #909090;
  overflow: hidden;
  text-align: center;
  background-image: url("../images/over3.jpg");
  border-radius: 50%;
  width: 30.26%;
  height: 300px;
	  -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;

}

.view2 .mask2,
.view2 .content {
  overflow: hidden;
  top: 0;
  left: 0
}

.view2 h2 {
  text-transform: uppercase;
  text-decoration: underline;
  border: 1px solid #000000;
  color: #FFFFFF;
  font-weight: 900;
  text-align: center;
  font-size: 27px;
  padding: 10px;
  background:#000000; 
  margin: 50px 0 0 0
}

.view2 p {
  font-family: Merriweather, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 800;
  position: relative;
  color: #FFFFFF;
  padding: 0px 10px 0px;
  text-align: center;
  text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;

}

.view2 a.info {
  display: inline-block;
  font-size: 26px;
  text-decoration: none;
  padding: 10px 10px;
  background: #000;
  color: #fff;
  font-family: Raleway, serif;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
}

.view2 a.info:hover {
  box-shadow: 0 0 5px #000
}


/*1*/

.view-third img {
  /*1*/
  transition: all 0.2s linear;
}

.view-third .mask2 {
  position: relative;
  opacity: 0;
  background-color: rgba(17,155,6,0.79);
  transition: all 0.4s ease-in-out;
  height: 400px;
}

.view-third h2 {
  transform: translateY(1px);
  opacity: 100;
  transition: all 0.2s ease-in-out;
}

.view-third p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}

.view-third a.info {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}


/* */

.view-third:hover img {
  transform: scale(1.1);
}

.view-third:hover .mask2 {
  opacity: 1;
}

.view-third:hover h2,
.view-third:hover p,
.view-third:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}

.view-third:hover p {
  transition-delay: 0.1s;
}

.view-third:hover a.info {
  transition-delay: 0.2s;
}

/* Website Design*/
.view3 {
  position: relative;
  margin: 10px 0px 10px 10px;
  display: block;
  float: left;
  border: 10px solid #909090;
  overflow: hidden;
  text-align: center;
  background-image: url("../images/over4.jpg");
  border-radius: 50%;
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
  width: 30.26%;
  height: 300px;
}

.view3 .mask3,
.view3 .content {
  overflow: hidden;
  top: 0;
  left: 0
}

.view3 h2 {
  text-transform: uppercase;
  text-decoration: underline;
  border: 1px solid #000000;
  color: #FFFFFF;
  font-weight: 900;
  text-align: center;
  font-size: 27px;
  padding: 10px;
  background:#000000;
  margin: 50px 0 0 0;
  overflow: hidden;
  
}

.view3 p {
 position: relative;
 display: block;
  font-family: Merriweather, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  padding: 0px 10px 0px;
  text-align: center;
  text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;

}

.view3 a.info {
  font-size: 26px;
  text-decoration: none;
  padding: 10px 10px;
  background: #000;
  color: #fff;
  font-family: Raleway, serif;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
}

.view3 a.info:hover {
  box-shadow: 0 0 5px #000
}


/*1*/

.view-fourth img {
  /*1*/
  transition: all 0.2s linear;
}

.view-fourth .mask3 {
 position: relative;
 display: block;
  opacity: 0;
  background-color: rgba(255,219,1,0.70);
  transition: all 0.4s ease-in-out;
  height: 100%; 
	
	
}

.view-fourth h2 {
  transform: translateY(1px);
  opacity: 100;
  transition: all 0.2s ease-in-out;
}

.view-fourth p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}

.view-fourth a.info {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}


/* */

.view-fourth:hover img {
  transform: scale(1.1);
}

.view-fourth:hover .mask3 {
	display: block;
  opacity: 1;
}

.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}

.view-fourth:hover p {
  transition-delay: 0.1s;
}

.view-fourth:hover a.info {
  transition-delay: 0.2s;
}
/*UI/UX Design */
.view4 {
  position: relative;
  margin: 10px 0px 10px 10px;
  display: block;
  float: left;
  border: 10px solid #909090;
  overflow: hidden;
  text-align: center;
  background-image: url("../images/over5.jpg");
  border-radius: 50%;
  width: 30.26%;
  height: 300px;
	  -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

.view4 .mask4,
.view4 .content {
  overflow: hidden;
  top: 0;
  left: 0
}

.view4 h2 {
  text-transform: uppercase;
  text-decoration: underline;
  border: 1px solid #000000;
  color: #FFFFFF;
  font-weight: 900;
  text-align: center;
  font-size: 30px;
  padding: 10px;
  background:#000000; 
  margin: 50px 0 0 0
}

.view4 p {
  font-family: Merriweather, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 800;
  position: relative;
  color: #FFFFFF;
  padding: 0px 10px 0px;
  text-align: center;
  text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;

}

.view4 a.info {
  display: inline-block;
  font-size: 26px;
  text-decoration: none;
  padding: 10px 10px;
  background: #000;
  color: #fff;
  font-family: Raleway, serif;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
}

.view4 a.info:hover {
  box-shadow: 0 0 5px #000
}


/*1*/

.view-fifth img {
  /*1*/
  transition: all 0.2s linear;
}

.view-fifth .mask4 {
  position: relative;
  opacity: 0;
  background-color: rgba(247,143,5,0.77);
  transition: all 0.4s ease-in-out;
  height: 400px;
}

.view-fifth h2 {
  transform: translateY(1px);
  opacity: 100;
  transition: all 0.2s ease-in-out;
}

.view-fifth p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}

.view-fifth a.info {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}


/* */

.view-fifth:hover img {
  transform: scale(1.1);
}

.view-fifth:hover .mask4 {
  opacity: 1;
}

.view-fifth:hover h2,
.view-fifth:hover p,
.view-fifth:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}

.view-fifth:hover p {
  transition-delay: 0.1s;
}

.view-fifth:hover a.info {
  transition-delay: 0.2s;
}
/*Graphic Art */
.view5 {
  position: relative;
  margin: 10px 0px 10px 10px;
  display: block;
  float: left;
  border: 10px solid #909090;
  overflow: hidden;
  text-align: center;
  background-image: url("../images/over6.jpg");
  border-radius: 50%;
  width: 30.26%;
  height: 300px;
	  -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;

}

.view5 .mask5,
.view5 .content {
  overflow: hidden;
  top: 0;
  left: 0
}

.view5 h2 {
  text-transform: uppercase;
  text-decoration: underline;
  border: 1px solid #000000;
  color: #FFFFFF;
  font-weight: 900;
  text-align: center;
  font-size: 30px;
  padding: 10px;
  background:#000000; 
  margin: 50px 0 0 0
}

.view5 p {
  font-family: Merriweather, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 800;
  position: relative;
  color: #FFFFFF;
  padding: 0px 10px 0px;
  text-align: center;
  text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;

}

.view5 a.info {
  display: inline-block;
  font-size: 26px;
  text-decoration: none;
  padding: 10px 10px;
  background: #000;
  color: #fff;
  font-family: Raleway, serif;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
}

.view5 a.info:hover {
  box-shadow: 0 0 5px #000
}


/*1*/

.view-sixth img {
  /*1*/
  transition: all 0.2s linear;
}

.view-sixth .mask5 {
  position: relative;
  opacity: 0;
  background-color: rgba(70,1,180,0.82);
  transition: all 0.4s ease-in-out;
  height: 400px;
}

.view-sixth h2 {
  transform: translateY(1px);
  opacity: 100;
  transition: all 0.2s ease-in-out;
}

.view-sixth p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}

.view-sixth a.info {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}


/* */

.view-sixth:hover img {
  transform: scale(1.1);
}

.view-sixth:hover .mask5 {
  opacity: 1;
}

.view-sixth:hover h2,
.view-sixth:hover p,
.view-sixth:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}

.view-sixth:hover p {
  transition-delay: 0.1s;
}

.view-sixth:hover a.info {
  transition-delay: 0.2s;
}

/*Projects */
.view6 {
  position: relative;
  margin: 10px 0px 10px 10px;
  display: block;
  float: left;
  border: 10px solid #909090;
  overflow: hidden;
  text-align: center;
  background-image: url("../images/over7.jpg");
  border-radius: 50%;
  width: 30.26%;
  height: 300px;
	  -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;

}

.view6 .mask6,
.view6 .content {
  overflow: hidden;
  top: 0;
  left: 0
}

.view6 h2 {
  text-transform: uppercase;
  text-decoration: underline;
  border: 1px solid #000000;
  color: #FFFFFF;
  font-weight: 900;
  text-align: center;
  font-size: 30px;
  padding: 10px;
  background:#000000; 
  margin: 50px 0 0 0
}

.view6 p {
  font-family: Merriweather, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 800;
  position: relative;
  color: #FFFFFF;
  padding: 0px 10px 0px;
  text-align: center;
  text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;

}

.view6 a.info {
  display: inline-block;
  font-size: 26px;
  text-decoration: none;
  padding: 10px 10px;
  background: #000;
  color: #fff;
  font-family: Raleway, serif;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
}

.view6 a.info:hover {
  box-shadow: 0 0 5px #000
}


/*1*/

.view-seventh img {
  /*1*/
  transition: all 0.2s linear;
}

.view-seventh .mask6 {
  position: relative;
  opacity: 0;
  background-color: rgba(25,177,220,0.74);
  transition: all 0.4s ease-in-out;
  height: 400px;
}

.view-seventh h2 {
  transform: translateY(1px);
  opacity: 100;
  transition: all 0.2s ease-in-out;
}

.view-seventh p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}

.view-seventh a.info {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}


/* */

.view-seventh:hover img {
  transform: scale(1.1);
}

.view-seventh:hover .mask6 {
  opacity: 1;
}

.view-seventh:hover h2,
.view-seventh:hover p,
.view-seventh:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}

.view-seventh:hover p {
  transition-delay: 0.1s;
}

.view-seventh:hover a.info {
  transition-delay: 0.2s;
}
/*Services */
.view7 {
  position: relative;
  margin: 10px 0px 10px 10px;
  display: block;
  float: left;
  border: 10px solid #909090;
  overflow: hidden;
  text-align: center;
  background-image: url("../images/over8.jpg");
  border-radius: 50%;
  width: 30.26%;
  height: 300px;
	  -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;

}

.view7 .mask7,
.view7 .content {
  overflow: hidden;
  top: 0;
  left: 0
}

.view7 h2 {
  text-transform: uppercase;
  text-decoration: underline;
  border: 1px solid #000000;
  color: #FFFFFF;
  font-weight: 900;
  text-align: center;
  font-size: 30px;
  padding: 10px;
  background:#000000; 
  margin: 50px 0 0 0
}

.view7 p {
  font-family: Merriweather, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 800;
  position: relative;
  color: #FFFFFF;
  padding: 0px 10px 0px;
  text-align: center;
  text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;

}

.view7 a.info {
  display: inline-block;
  font-size: 26px;
  text-decoration: none;
  padding: 10px 10px;
  background: #000;
  color: #fff;
  font-family: Raleway, serif;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
}

.view7 a.info:hover {
  box-shadow: 0 0 5px #000
}


/*1*/

.view-eighth img {
  /*1*/
  transition: all 0.2s linear;
}

.view-eighth .mask7 {
  position: relative;
  opacity: 0;
  background-color: rgba(188,139,4,0.72);
  transition: all 0.4s ease-in-out;
  height: 400px;
}

.view-eighth h2 {
  transform: translateY(1px);
  opacity: 100;
  transition: all 0.2s ease-in-out;
}

.view-eighth p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}

.view-eighth a.info {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}


/* */

.view-eighth:hover img {
  transform: scale(1.1);
}

.view-eighth:hover .mask7 {
  opacity: 1;
}

.view-eighth:hover h2,
.view-eighth:hover p,
.view-eighth:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}

.view-eighth:hover p {
  transition-delay: 0.1s;
}

.view-eighth:hover a.info {
  transition-delay: 0.2s;
}
/*Photo and Video */
.view8 {
  position: relative;
  margin: 10px 0px 10px 10px;
  display: block;
  float: left;
  border: 10px solid #909090;
  overflow: hidden;
  text-align: center;
  background-image: url("../images/over9.jpg");
  border-radius: 50%;
  width: 30.26%;
  height: 300px;
	  -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;

}

.view8 .mask8,
.view8 .content {
  overflow: hidden;
  top: 0;
  left: 0
}

.view8 h2 {
  text-transform: uppercase;
  text-decoration: underline;
  border: 1px solid #000000;
  color: #FFFFFF;
  font-weight: 900;
  text-align: center;
  font-size: 30px;
  padding: 10px;
  background:#000000; 
  margin: 50px 0 0 0
}

.view8 p {
  font-family: Merriweather, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 800;
  position: relative;
  color: #FFFFFF;
  padding: 0px 10px 0px;
  text-align: center;
  text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;

}

.view8 a.info {
  display: inline-block;
  font-size: 26px;
  text-decoration: none;
  padding: 10px 10px;
  background: #000;
  color: #fff;
  font-family: Raleway, serif;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
}

.view8 a.info:hover {
  box-shadow: 0 0 5px #000
}


/*1*/

.view-nineth img {
  /*1*/
  transition: all 0.2s linear;
}

.view-nineth .mask8 {
  position: relative;
  opacity: 0;
  background-color: rgba(19,214,118,0.75);
  transition: all 0.4s ease-in-out;
  height: 400px;
}

.view-nineth h2 {
  transform: translateY(1px);
  opacity: 100;
  transition: all 0.2s ease-in-out;
}

.view-nineth p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}

.view-nineth a.info {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}


/* */

.view-nineth:hover img {
  transform: scale(1.1);
}

.view-nineth:hover .mask8 {
  opacity: 1;
}

.view-nineth:hover h2,
.view-nineth:hover p,
.view-nineth:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}

.view-nineth:hover p {
  transition-delay: 0.1s;
}

.view-nineth:hover a.info {
  transition-delay: 0.2s;
}
<div class="section group">
	<div class="view view-first">
	<h2>LOGOS</h2>
	<div class="mask">
      <p>The Beginning Part Of The Branding Process.Logos I Have Done For Clients</p>
      <a href="#" class="info">Click Here</a>
    </div>
	</div>
	<div class="view1 view-second">
	<h2>PRINT DESIGN</h2>
    <div class="mask1">
      <p>Flyers, Pamphlets, Business Cards And More. Print Marketing For Clients</p>
      <a href="#" class="info">Click Here</a>
    </div>
	</div>
	<div class="view2 view-third">
	<h2>PACKAGE DESIGN</h2>
    <div class="mask2">
      <p>Package Design And Engineering For Marketing And Consumption For Clients</p>
      <a href="#" class="info">Click Here</a>
    </div>
	</div>
	<div class="view3 view-fourth">
	<h2>WEBSITE DESIGN</h2>
    <div class="mask3">
      <p>Websites, Email Blasts And Other Programing Using HTML, CSS, Javascipt Etc.</p>
      <a href="#" class="info">Click Here</a>
    </div>
	</div>
	<div class="view4 view-fifth">
	<h2>UI/UX DESIGN</h2>
    <div class="mask4">
      <p>User Interface And User Experience Design For Mobile, Tablet, Web, Etc.</p>
      <a href="#" class="info">Click Here</a>
    </div>
	</div>
	<div class="view5 view-sixth">
	<h2>GRAPHIC ART</h2>
    <div class="mask5">
      <p>Digital And Traditional Art Using Font, Graphics, And Other Methods</p>
      <a href="#" class="info">Click Here</a>
    </div>
	</div>
	<div class="view6 view-seventh">
	<h2>PROJECTS</h2>
    <div class="mask6">
      <p>Current Projects I Am Working On For Clients And Personal </p>
      <a href="#" class="info">Click Here</a>
    </div>
	</div>
	<div class="view7 view-eighth">
	<h2>SERVICES</h2>
    <div class="mask7">
      <p>My Skillset And Tasks I Can Do As Well As The Programs I Use</p>
      <a href="Services.html" class="info">Click Here</a>
    </div>
	</div>
	<div class="view8 view-nineth">
	<h2>PHOTO & VIDEO</h2>
    <div class="mask8">
      <p>Photo Editing, Video Editing, Presentation Design And Production</p>
      <a href="#" class="info">Click Here</a>
    </div>
	</div>
</div>

【问题讨论】：

  • 嘿@cambam88，我不明白你能不能提供一张显示你想要的图片。谢谢
  • @sbrrk 嘿，我将图片链接附加到我的帖子末尾，这样它可以更好地理解我在寻找什么，如果你运行代码 sn-p 我认为它给出了一个例子我的编码是什么样的。谢谢你的帮助:)

标签： html css image hover mouseover


【解决方案1】：

根据您的问题陈述和我的理解，这可能会对您有所帮助

.section > div h2 {
     text-transform: uppercase;
     text-decoration: underline;
     border: 1px solid #000000;
     color: #FFFFFF;
     font-weight: 900;
     text-align: center;
     font-size: 30px;
     padding: 10px;
     transition:all 0.3s linear;
     background:rgba(0,0,0,0.5);
     margin: 50px 0 0 0;
     overflow: hidden;
}
.section > div:hover h2 {
  transition: all 0.3s linear;
  background: linear-gradient(90deg,rgba(0,0,0,0.7),rgba(0,0,0,0.5));
}

对不透明背景使用 rgba 颜色格式

【讨论】：

    猜你喜欢
    • 2011-04-14
    • 2015-11-12
    • 1970-01-01
    • 2021-01-28
    • 1970-01-01
    • 2016-12-26
    • 1970-01-01
    • 2022-07-05
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode