(adsbygoogle = window.adsbygoogle || []).push({}); First off I want to give a big thanks to the many people who have helped me solve some problems with the website I am trying to create. I am no where near done, but thanks to the help many have provided me on this website I have definitely been able to speed up the process and improve.

A new problem I am facing is that my photos are not transitioning correctly. Everything else is working perfectly fine at the moment aside from the transitions. Instead of transitioning from one photo to the next; it just stays on the first photo.

Css:

    		#cf { 

				position: relative;

				height: 600px;

				width: 800px;

				margin: 0 auto;

				color: #fff;

			   }

		

		#cf img {

					position: absolute;

					left: 0;

					width: 400px; height:300px;

					border: 2px solid white;

					border-radius: 10px;

					transition: opacity 1s ease-in-out;

		           }

		

                #cf img.top: hover {

					    opacity: 0;

					   }

html:

    

<div id="cf">

<img class="bottom" src="images/f1.jpg"/>

<img class="top" src="images/f2.jpg"/>

</div>