removed blue modal button outline, changed social media hovers so modal shows when clicking div rather than putting button around the contents

Author: Mike Young

css/effects.css

@@ -133,7 +133,7 @@ color: #fff;
   box-shadow: 0 0 5px #fff;
 }
 
-/* stlying to remove box shadow and border from buttons for last few effects */
+/* styling to remove box shadow and border from buttons for last few effects */
 
 .hover button.nullbutton {
   border: none;
@@ -145,12 +145,15 @@ color: #fff;
   box-shadow: none;
 }
 
-/* styling for the effects that have no visual button, however these buttons only seem to work in chrome and not firefox */
-.emptybutton {
-  padding: 0px;
-  margin: 0px;
-  border: none;
-  width: 100%;
+/* remove the blue line that shows on modal buttons after you have open and close a modal */
+
+.modal-open .modal, button:focus {
+    outline:none!important
+}
+
+/* styling so when hovering over a div that opens a modal the cursor changes to a pointer */
+.point {
+cursor: pointer;
 }
 
 /* effect hover 1 */

index.html

@@ -162,8 +162,7 @@ <h2>Hover effect 5</h2>
 					<img class="img-responsive" src="images/for.jpg" alt="">
 
 
-						<div class="overlay">
-							<button class="emptybutton" data-toggle="modal" data-target="#modal6">
+						<div class="overlay point" data-toggle="modal" data-target="#modal6">
 							<h2>Hover effect 6</h2>
 							<div class="rotate">
 							<p class="group1">
@@ -177,7 +176,6 @@ <h2>Hover effect 6</h2>
 								<a href="#"><i class="fa fa-dribbble"></i></a>
 							</p>
 							</div>
-							</button>
 						</div>				
 
 						</div>				
@@ -189,25 +187,22 @@ <h2>Hover effect 6</h2>
                   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">				
 				<div class="hover ehover7">
 					<img class="img-responsive" src="images/hand.jpg" alt="">
-						<div class="overlay">
-						<button class="emptybutton" data-toggle="modal" data-target="#modal7">
+						<div class="overlay point" data-toggle="modal" data-target="#modal7">
 							<h2>Hover effect 7</h2>
 							<p>
 							<a href="#"><i class="fa fa-twitter"></i></a>
 							<a href="#"><i class="fa fa-facebook"></i></a>
 							<a href="#"><i class="fa fa-instagram"></i></a>
 							<a href="#"><i class="fa fa-dribbble"></i></a>
 							</p>
-						</button>
 						</div>
 
 				</div>
             </div>
 			      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">				
 				<div class="hover ehover8">
 					<img class="img-responsive" src="images/p9.jpg" alt="">
-						<div class="overlay">
-						<button class="emptybutton" data-toggle="modal" data-target="#modal8">
+						<div class="overlay point" data-toggle="modal" data-target="#modal8">
 							<h2>Hover effect 8</h2>
 							<p class="set1">
 								<a href="#"><i class="fa fa-twitter"></i></a>
@@ -218,7 +213,6 @@ <h2>Hover effect 8</h2>
 								<a href="#"><i class="fa fa-instagram"></i></a>
 								<a href="#"><i class="fa fa-dribbble"></i></a>
 							</p>
-						</button>
 						</div>				
 				</div>
             </div>