Aiden P Aiden P - 3 months ago 12
CSS Question

Hovering over text makes the image lose effect

I have a problem that when I hover an image it displays the right effect but when I hover over the the text inside the image the image itself looses the effect.

Demonstration: https://skullscream.github.io/tributepage/ go to the second section with three images.

Images won't be shown in the snippet because they are locally stored but if necessary I can upload them and change the links.



* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial;
background-color: white;
font-size: 16px;
}

/* Section 1 */

.heading-pictures {
margin-top: 2%;
}

#top-picture {
margin-bottom: -4%;
}


.paragraph {
background-color: #95a5a6;
padding: 2%;
color: white;
text-align: justify;
}

.title {
position: absolute;
color: #6c7878;
}

.hd1 {
font-size: 5.25em;
}

.hd1,
.hd2 {
text-align: center;
padding-top: 15%;
line-height: 1;
}

.hd2 {
padding-top: 5%;
border-top: 1px solid #6c7878;
}

.section1 {
position: relative;
}

div.paragraph-quote {
margin-bottom: 4%;
background-color: rgba(0, 0, 0, 0)
}

hr.style-one {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}

/* Section 2 */

.inventions {
width: 100%;
-webkit-filter: brightness(100%);
transition: all .3s ease-in, all .3s ease-out;
}

.images {
margin-top: 2%;
}

.section2 p {
text-align: center;
font-size: 2.5em;
color: #6c7878;
margin-top: 2%;
}

.section2 div {
margin-bottom: 2%;
}

.tesla-patents p {
text-align: justify;
color: white;
background-color: #95a5a6;
font-size: 1em;
padding: 1.5%;
margin-top: 1%;
}

.tesla-patents p span a {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}

.tesla-patents p span a:hover,
.tesla-patents p span a:visited {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}

/*Text on hover*/

.inventions:hover{
-webkit-filter: brightness(40%);
}

div.images span {
background-color: rgba(0,0,0,0);
padding: 0;
margin: 0 auto;
}

.img-description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
-webkit-transition: visibility opacity .3s ease-in, visibility opacity .3s ease-out;

}

.img-wrap:hover .img-description {
visibility: visible;
opacity: 1;
font-size: 3em;
text-align: center;
padding: 0;
margin: 25%;
color: white;
}

/* Section 3 */

.bio-heading {
font-size: 2.5em;
color: #6c7878;
padding: 0;
text-align: center;
margin-top: 1%;
margin-bottom: 3%;
}

#detailed-bio p {
text-align: justify;
color: white;
background-color: #95a5a6;
font-size: 1em;
padding: 1.5%;
margin-top: 1%;
}

#detailed-bio p a {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}

#detailed-bio p a:hover,
#detailed-bio p a:visited {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}

footer {
font-size: .7em;
margin-bottom: 1%;
text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<link href="tribute.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<title>Nikola Tesla, Engineer and Inventor</title>
</head>


<body>
<div class="container-fluid">

<!-- Section 1 -->

<div class="row">
<div class="section1 col-xs-12">
<div class="row">
<div class="title col-lg-offset-1 col-lg-3 col-md-offset-1 col-md-3 col-sm-offset-1 col-sm-3 col-xs-12">
<p class="hd1">Nikola Tesla</p>
<p class="hd2">Inventor and Engineer</p>
</div>

<div class="heading-pictures col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12">
<img class="img-responsive" id="top-picture" src="http://www.anonews.co/wp-content/uploads/2016/01/kak_360001.jpg" alt="Image of Nikola Tesla">
</div>

<div class="paragraph-quote col-lg-7 col-lg-offset-1 col-md-7 col-lg-offset-1 col-sm-9 col-xs-12">
<p class="paragraph">"The day science begins to study non-physical phenomena, it will make more progress in one decade than in all the previous centuries of its existence." &nbsp;&nbsp;- Nikola Tesla</p>
</div>
</div>
</div>
</div>

<hr class="style-one">

<!-- Section 2 -->

<div class="row">
<div class="section2 col-xs-12">
<div class="row">
<div class="col-xs-12">
<p>What is Nikola Tesla known for?</p>
</div>

<div class="images col-lg-4 col-xs-12 img-wrap">
<img class="img-responsive inventions" src="images/hose-coupling-power-cable-strange-black-64025.jpeg" alt="PROJECT">
<span class="img-description">AC</span>
</div>

<div class="images col-lg-4 col-xs-12 img-wrap">
<img class="img-responsive inventions" src="images/pexels-photo-109998.jpeg">
<span class="img-description">NEONS</span>
</div>
<div class="images col-lg-4 col-xs-12 img-wrap">
<img class="img-responsive inventions" src="images/sound-speaker-radio-microphone.jpg">
<span class="img-description">RADIO</span>
</div>

<div class="tesla-patents col-xs-12">
<p>Nikola Tesla was an inventor who obtained around 300 patents worldwide for his inventions. Some of Tesla's patents are not accounted for, and various sources have discovered some that have lain hidden in patent archives. There are a minimum of 278 patents issued to Tesla in 26 countries that have been accounted for. Many of Tesla's patents were in the United States, Britain, and Canada, but many other patents were approved in countries around the globe. Many inventions developed by Tesla were not put into patent protection. <span><a href="https://en.wikipedia.org/wiki/List_of_Nikola_Tesla_patents" target="_blank">Source</a></span></p>
</div>
</div>
</div>
</div>

<hr class="style-one">

<!-- Section 3 -->

<div class="row">
<div class="bio-section col-xs-12">
<p class="bio-heading">Biography</p>
<div id="detailed-bio">
<p>Nikola Tesla was born on July 10, 1856 in Smiljan, Lika, which was then part of the Austo-Hungarian Empire, region of Croatia. His father, Milutin Tesla was a Serbian Orthodox Priest and his mother Djuka Mandic was an inventor in her own right of household appliances. Tesla studied at the Realschule, Karlstadt in 1873, the Polytechnic Institute in Graz, Austria and the University of Prague. At first, he intended to specialize in physics and mathematics, but soon he became fascinated with electricity. He began his career as an electrical engineer with a telephone company in Budapest in 1881. It was there, as Tesla was walking with a friend through the city park that the elusive solution to the rotating magnetic field flashed through his mind. With a stick, he drew a diagram in the sand explaining to his friend the principle of the induction motor. Before going to America, Tesla joined Continental Edison Company in Paris where he designed dynamos. While in Strassbourg in 1883, he privately built a prototype of the induction motor and ran it successfully. Unable to interest anyone in Europe in promoting this radical device, Tesla accepted an offer to work for Thomas Edison in New York. His childhood dream was to come to America to harness the power of Niagara Falls....<span id="read-more-link"><a href="http://www.teslasociety.com/biography.htm" target="_blank">Read more</a></span></p>
</div>
</div>

</div>
<hr class="style-one">
<footer>Website created by Milan for FreeCodeCamp. 25.8.2016.</footer>
</div>
</body>
</html>




Answer

Write :hover effect on the parent div instead of img itself, as when you hover over your text element your img loses its hover event, so better solution will be to target the parent div as:

Code Snippet

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial;
  background-color: white;
  font-size: 16px;
}
/* Section 1 */

.heading-pictures {
  margin-top: 2%;
}
#top-picture {
  margin-bottom: -4%;
}
.paragraph {
  background-color: #95a5a6;
  padding: 2%;
  color: white;
  text-align: justify;
}
.title {
  position: absolute;
  color: #6c7878;
}
.hd1 {
  font-size: 5.25em;
}
.hd1,
.hd2 {
  text-align: center;
  padding-top: 15%;
  line-height: 1;
}
.hd2 {
  padding-top: 5%;
  border-top: 1px solid #6c7878;
}
.section1 {
  position: relative;
}
div.paragraph-quote {
  margin-bottom: 4%;
  background-color: rgba(0, 0, 0, 0)
}
hr.style-one {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
/* Section 2 */

.inventions {
  width: 100%;
  -webkit-filter: brightness(100%);
  transition: all .3s ease-in, all .3s ease-out;
}
.images {
  margin-top: 2%;
}
.section2 p {
  text-align: center;
  font-size: 2.5em;
  color: #6c7878;
  margin-top: 2%;
}
.section2 div {
  margin-bottom: 2%;
}
.tesla-patents p {
  text-align: justify;
  color: white;
  background-color: #95a5a6;
  font-size: 1em;
  padding: 1.5%;
  margin-top: 1%;
}
.tesla-patents p span a {
  color: white;
  background-color: #95a5a6;
  font-style: italic;
  float: right;
  text-decoration: underline;
}
.tesla-patents p span a:hover,
.tesla-patents p span a:visited {
  color: white;
  background-color: #95a5a6;
  font-style: italic;
  float: right;
  text-decoration: underline;
}
/*Text on hover*/

.img-wrap:hover img {
  -webkit-filter: brightness(40%);
}
div.images span {
  background-color: rgba(0, 0, 0, 0);
  padding: 0;
  margin: 0 auto;
}
.img-description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  -webkit-transition: visibility opacity .3s ease-in, visibility opacity .3s ease-out;
}
.img-wrap:hover .img-description {
  visibility: visible;
  opacity: 1;
  font-size: 3em;
  text-align: center;
  padding: 0;
  margin: 25%;
  color: white;
}
/* Section 3 */

.bio-heading {
  font-size: 2.5em;
  color: #6c7878;
  padding: 0;
  text-align: center;
  margin-top: 1%;
  margin-bottom: 3%;
}
#detailed-bio p {
  text-align: justify;
  color: white;
  background-color: #95a5a6;
  font-size: 1em;
  padding: 1.5%;
  margin-top: 1%;
}
#detailed-bio p a {
  color: white;
  background-color: #95a5a6;
  font-style: italic;
  float: right;
  text-decoration: underline;
}
#detailed-bio p a:hover,
#detailed-bio p a:visited {
  color: white;
  background-color: #95a5a6;
  font-style: italic;
  float: right;
  text-decoration: underline;
}
footer {
  font-size: .7em;
  margin-bottom: 1%;
  text-align: center;
}
<!DOCTYPE html>
<html>

<head>
  <link href="tribute.css" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <title>Nikola Tesla, Engineer and Inventor</title>
</head>


<body>
  <div class="container-fluid">

    <!-- Section 1 -->

    <div class="row">
      <div class="section1 col-xs-12">
        <div class="row">
          <div class="title col-lg-offset-1 col-lg-3 col-md-offset-1 col-md-3 col-sm-offset-1 col-sm-3 col-xs-12">
            <p class="hd1">Nikola Tesla</p>
            <p class="hd2">Inventor and Engineer</p>
          </div>

          <div class="heading-pictures col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12">
            <img class="img-responsive" id="top-picture" src="http://www.anonews.co/wp-content/uploads/2016/01/kak_360001.jpg" alt="Image of Nikola Tesla">
          </div>

          <div class="paragraph-quote col-lg-7 col-lg-offset-1 col-md-7 col-lg-offset-1 col-sm-9 col-xs-12">
            <p class="paragraph">"The day science begins to study non-physical phenomena, it will make more progress in one decade than in all the previous centuries of its existence." &nbsp;&nbsp;- Nikola Tesla</p>
          </div>
        </div>
      </div>
    </div>

    <hr class="style-one">

    <!-- Section 2 -->

    <div class="row">
      <div class="section2 col-xs-12">
        <div class="row">
          <div class="col-xs-12">
            <p>What is Nikola Tesla known for?</p>
          </div>

          <div class="images col-lg-4 col-xs-12 img-wrap">
            <img class="img-responsive inventions" src="https://skullscream.github.io/tributepage/images/pexels-photo-109998.jpeg" alt="PROJECT">
            <span class="img-description">AC</span>
          </div>

          <div class="images col-lg-4 col-xs-12 img-wrap">
            <img class="img-responsive inventions" src="https://skullscream.github.io/tributepage/images/pexels-photo-109998.jpeg">
            <span class="img-description">NEONS</span>
          </div>
          <div class="images col-lg-4 col-xs-12 img-wrap">
            <img class="img-responsive inventions" src="https://skullscream.github.io/tributepage/images/pexels-photo-109998.jpeg">
            <span class="img-description">RADIO</span>
          </div>

          <div class="tesla-patents col-xs-12">
            <p>Nikola Tesla was an inventor who obtained around 300 patents worldwide for his inventions. Some of Tesla's patents are not accounted for, and various sources have discovered some that have lain hidden in patent archives. There are a minimum
              of 278 patents issued to Tesla in 26 countries that have been accounted for. Many of Tesla's patents were in the United States, Britain, and Canada, but many other patents were approved in countries around the globe. Many inventions developed
              by Tesla were not put into patent protection. <span><a href="https://en.wikipedia.org/wiki/List_of_Nikola_Tesla_patents" target="_blank">Source</a></span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <hr class="style-one">

    <!-- Section 3 -->

    <div class="row">
      <div class="bio-section col-xs-12">
        <p class="bio-heading">Biography</p>
        <div id="detailed-bio">
          <p>Nikola Tesla was born on July 10, 1856 in Smiljan, Lika, which was then part of the Austo-Hungarian Empire, region of Croatia. His father, Milutin Tesla was a Serbian Orthodox Priest and his mother Djuka Mandic was an inventor in her own right
            of household appliances. Tesla studied at the Realschule, Karlstadt in 1873, the Polytechnic Institute in Graz, Austria and the University of Prague. At first, he intended to specialize in physics and mathematics, but soon he became fascinated
            with electricity. He began his career as an electrical engineer with a telephone company in Budapest in 1881. It was there, as Tesla was walking with a friend through the city park that the elusive solution to the rotating magnetic field flashed
            through his mind. With a stick, he drew a diagram in the sand explaining to his friend the principle of the induction motor. Before going to America, Tesla joined Continental Edison Company in Paris where he designed dynamos. While in Strassbourg
            in 1883, he privately built a prototype of the induction motor and ran it successfully. Unable to interest anyone in Europe in promoting this radical device, Tesla accepted an offer to work for Thomas Edison in New York. His childhood dream
            was to come to America to harness the power of Niagara Falls....<span id="read-more-link"><a href="http://www.teslasociety.com/biography.htm" target="_blank">Read more</a></span>
          </p>
        </div>
      </div>

    </div>
    <hr class="style-one">
    <footer>Website created by Milan for FreeCodeCamp. 25.8.2016.</footer>
  </div>
</body>

</html>

Comments