Image Hover Effect

CSS Image Hover Effect?

It seems you haven't followed THIS guide very well.

You also have not identified what #content is.

You need to revise how you target IDs, Classes and Elements in CSS.

Here is your code remodified to follow the guide, plus I added in #content for you.

#content .img {
  position: relative;
  width: 50%;
}

#content img {
  display: block;
  width: 200px;
  height: auto;
  border-radius: 50%;
}

#content .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 200px;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
  border-radius: 50%;
}

#content .img:hover .overlay {
  opacity: 1;
}

#content .text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div id="content">

<div class="container">
  <div class="column">
    <div class="team">
      <div class="img">
        <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Sample Image">
        <div class="overlay">
          <div class="text">Hello World</div>
        </div>
      </div>
      <h3 class="team-prof">
        <a href="#">Dr. Pawan Kumar Kesari</a>
      </h3>
    </div>
  </div>
</div>

</div>

Hover effect in the image

What you want is to make a class to control the hover effect you want to add. This is done like so in CSS:

.classname:hover{
    /*css stuff here*/
}

The recommended approach would be to have a different image after the user hovers over your image like so:

.classname:hover{
    background-image: url('path to your image');
}

If you want to add an outline to the image then you can use drop-shadow, which is a quick-fix but I don't recommend, like so:

.classname:hover{
    -webkit-filter: drop-shadow(1px 1px 0 yellow)
                    drop-shadow(-1px -1px 0 yellow);
    filter: drop-shadow(1px 1px 0 yellow) 
            drop-shadow(-1px -1px 0 yellow);
}

How to give hover effect to specific part of image?

I've made you an example with just the right-most orange, but you get the idea. just place SVGs and give each a unique class name (for size/position).

You can use an online tool, such as this, to create your SVG shapes.

A thing to keep in mind is if the image resizes, the position & size of the highlights should remain correct (this is why working with percentages is best)

.imageWrapper {
  width: 500px;
  position: relative;
}

.imageWrapper img {
  width:100%; height:100%;
  object-fit: contain;
}

.image-area {
  position: absolute;
  
  top: 69.5%; /* position should be in percentages */
  left: 73.5%; /* position should be in percentages */
  
  transition: .4s;
  mix-blend-mode: lighten; /* work the best with the default black fill of svg shapes */
  cursor: pointer;
}

.image-area:hover {
  filter: drop-shadow(0 0 20px gold);
}

.image-area--orange-1 {
  /* sizes should be in percentages */
  width: 21%;
  height: 18%;
}

<div class='imageWrapper'>
  <!-- fill with SVG areas -->
  <svg viewBox="0 0 100 100" class='image-area image-area--orange-1'>
    <circle cx="50" cy="50" r="50"/>
  </svg>
  <!-- -->
  
  <img src="https://i.stack.imgur.com/8BVo6.jpg"/>
</div>

Hover over image to add effect, hover again to make it dissapear

I just added a little bit of Javascript to make it work, and even a transition.

JSFiddle - https://jsfiddle.net/8850s/oj5rcv8n/

HTML -

    <div id="photos">
      <div class="images">
        <img src="/photographs/clouds.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/DogPrint.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/euro.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/FireHead.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/wasabi.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/sam.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/roli.jpg" />
                <div>
                Text
                </div>
      </div>
</div>

JS -

    var images = document.querySelectorAll('#photos > .images > img')
for (var i = 0; i < images.length; i ++) {
    images[i].style.transitionDuration = '0.1s'
    images[i].nextElementSibling.style.transitionDuration = '0.1s'
    images[i].nextElementSibling.style.opacity = '0'
    images[i].addEventListener('mouseenter', function() {
        if (this.style.filter === "grayscale(100%)") {
        this.style.filter = "grayscale(0%)";
            this.nextElementSibling.style.opacity = "0";
    } else {
        this.style.filter = "grayscale(100%)";
            this.nextElementSibling.style.opacity = "1";
    }

    })
}

CSS -

img {
  width: 100%;
  filter: grayscale(100%);
  border-radius: 2px;
  transition: all 0.25s ease-in-out;
}

#photos {
  columns: 5 200px;
  column-gap: 1.5rem;
  width: 90%;
  margin-top: 200px;
  margin-left: 200px;
}

Keep image hover effect when hovering the text in front of it

It happens because you hover the text instead of the image, you need to select the container and apply your style on the image. Try .gallery-item:hover .gallery-img{} instead of .gallery-img:hover{}

.gallery {
  width:500px;
}
.gallery-item {
  overflow: hidden;
  position: relative;
}
.gallery-img {
  display: block;
  width: 100%;
  transition: transform 0.3s;
}
.gallery-item:hover .gallery-img{
  transform: scale(1.2);
  filter: brightness(0.4);
}
.gallery-img-text {
  font-size: 2.4rem;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  visibility: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover .gallery-img-text {
  visibility: visible;
  opacity: 1;
}

<div class="gallery">
  <figure class="gallery-item">
    <img class="gallery-img"
    src="https://live.staticflickr.com/2462/3934247179_f29557d66a_z.jpg"
    alt="photo of beautifully arranged food" />
    <div class="gallery-img-text">
      <p>Omelette</p>
    </div>
  </figure>
</div>

Fixed Menu Dissapears on Image Hover Effect

Just add any positive z-index to navigation.

* {background-color: black
}
*{
    padding: 0;
    margin: 0;
}

.navigation {
  z-index: 1;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  background-color: black;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  height: 65px;
  border-style: dashed;
  border-color:green;
  border-radius: 20px;
  height: 80px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  border-style: dotted;
  margin-left: 24px;
  margin-top: 11px;
}

li a:hover {
  background-color: red;
}

.parrafo{
    font-size: 40px;
    padding: 75px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-left: 22px;
    padding-left: 150px;
    border-top: dotted 5px red;
    border-bottom: dotted 5px yellowgreen;
    display: flex;
    flex-direction: row;
    font-family: sans-serif;
    font-weight: bold;
    color: white;
    
}

.queonda{
font-family: sans-serif;
font-weight: bold;
color: white;
font-size: 50px;
margin-left: 85px;
}

.test{
    margin-left: 200px;
    margin-top: 270px;
}

.test2{
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 700px;
}

.portrait {
  overflow: hidden;
  display: inline-block;
}

.portrait img {
  transition: transform 0.5s linear;
  max-width: 100%;
  max-height: 100%;
}

.portrait:hover img {
  transform: scale(1.1);
}

.cat {
 height: 1250px;
 width: 1900px;
}

.algo {
    height: 880px;
    width: 1700px;
    display: block;
}

.active {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

<div class="navigation active">
    <ul>
        <li><a href="#home">Tour</a></li>
        <li><a href="#news">Listen to Music</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</div>

<div class="portrait algo"><img src="https://i.ibb.co/dLrSmP7/1111.jpg" alt="Sample Image"></div>

<div class="parrafo">
    <img src="https://muzikercdn.com/uploads/products/4207/420772/09821a89.jpg" alt="Ciudad con Transito">
    <P class="test">MUSIC<br>MAINSTREAM   SELLOUT</P>
</div>

<div class="test2">
    <P class="queonda">VIDEOS</P><br><br>
    <video width="1280" controls autoplay="off">
        <source src="./img/prueba2.mp4" type="video/mp4">

</div>

<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="footer-col">
                <h4>Terms & Conditions</h4>
            </div>
            <div class="footer-col">
                <h4><a class="textDecoration" href="#privacy">Privacy and Policy</a></h4>
            </div>

            <div class="footer-col">
                <h4>Follow Us</h4>
                <div class="social-links">

                </div>
            </div>
            <div class="footer-col">
                <div class="social-links">
                    <h3><a href="#" class="fa fa-facebook"></a>
                        <a href="#" class="fa fa-twitter"></a>
                        <a href="#" class="fa fa-instagram"></a>
                        <a href="#" class="fa fa-youtube"></a>
                    </h3>
                </div>
            </div>
        </div>
</footer>

Create 3d image hover effect

You can use transform styling to get the 3D effect. Checkout my code below

var card = document.getElementsByClassName('card');

document.addEventListener("mousemove", function(e) {  
  var ax = -(window.innerWidth/2- e.pageX)/20;
  var ay = (window.innerHeight/2- e.pageY)/10;
  document.getElementById("cards").style.transform = "rotateY("+ax+"deg) rotateX("+ay+"deg)"; 
});

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700);
 body {
     background: #edf2f4;
     perspective: 1000px;
     transform-style: preserve-3d;
     display: flex;
     height: 100vh;
     font-family: "Playfair Display", georgia, serif;
}
 .card {
     pointer-events: none;
     transform: translateZ(0);
     padding: 30px;
     background: white;
     border-radius: 5px;
     width: 400px;
     height: 200px;
     margin: auto;
     transform-style: preserve-3d;
     backface-visibility: hidden;
     display: flex;
     box-shadow: 0 0 5px rgba(0, 0, 0, .1);
     position: relative;
}
 .card:after {
     content: " ";
     position: absolute;
     width: 100%;
     height: 10px;
     border-radius: 50%;
     left: 0;
     bottom: -50px;
     box-shadow: 0 30px 20px rgba(0, 0, 0, .3);
}
 .card .card-content {
     margin: auto;
     text-align: center;
     transform-style: preserve-3d;
}
 .card h1 {
     transform: translateZ(100px);
}

<div id="cards" class="card">
  <div class="card-content">
    <h1>Just hover around</h1>
  </div>
</div>