Responsive hover for responsive image - image

how to do responsive hover?
This is good hover example and it's perfectly fits for my screen size and this is bad not responsive hover example
This is my code
HTML
<div class="product-img-list">
<%= link_to product_path(product), class: 'product_link' do %>
<%= image_tag(product.image_url, class: "img-responsive", size: "300x250") %>
<% end %>
<span class="product-img-text"><span>code</span></span>
</div>
CSS
span.product-img-text {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 80px;
left: 15px;
position: absolute;
top: 230px;
width: 291px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.product-img-list:hover span.product-img-text {
opacity: 1;
}
span.product-img-text span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.img-responsive {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.product-img-list.img-responsive {
display: inline-block;
margin: 0 1em 1em 0;
position: relative;
}
Thank you for help

I would say that you must make the .product-img-text be responsive (instead of using hardcoded dimensions)
something like the following
span.product-img-text {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
position: absolute;
height: 25%; /*assuming text is not that much*/
left: 1em; /*to account for margin*/
right:1em /*to account for margin*/
bottom: 0; /*add it to bottom of image*/
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
and you will have to make .product-img-list be realtive positioned if it is not.
.product-img-list{position:relative}

Related

Dropdown menu hidden behind slideshow container?

We have a main index page with a dropdown menu and slide show, and the z-index works fine, but in our other pages, we removed the slideshow and left the dropdown menu. But for some reason in the pages without the slideshow, the dropdown menu gets hidden behind the container the slideshow used to be, despite the removal of all slideshow HTML. This leads me to believe it is a CSS issue.
Any suggestions would be well appreciated!
Here's the HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stigler Public Schools</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="\\stigler-web\web\New Website\caleab\stiglerstylesheet.css"/>
</head>
<body>
<img class="logo" src="sps_logo.png" alt="Stigler Public Schools">
<p class="header">Stigler Public Schools</p>
<div class="nav">
<ul class="navigation">
<a class="main" href="#url">District</a>
<li class="n1">High School</li>
<li class="n2">Middle School</li>
<li class="n3">Grade School</li>
<li class="n4">Administration</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Resources</a>
<li class="n1">School Calender</li>
<li class="n2">Menus</li>
<li class="n3">Employment</li>
<li class="n4">Counseling</li>
<li class="n5">Grade Book</li>
<li class="n6">Yearbook</li>
</ul>
</td>
<ul class="navigation">
<a class="main" href="#url">Organizations</a>
<li class="n1">Athletics</li>
<li class="n2">Music</li>
<li class="n3">Drama</li>
<li class="n4">FFA</li>
<li class="n5">A-Z</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Board Of Education</a>
<li class="n1">Information</li>
<li class="n2">Meetings</li>
<li class="n3">Policies</li>
</ul>
</div>
</body>
</html>
And Here's the CSS
* {
margin: 0px;
padding: 0px;
outline: none;
border: 0px;
}
body {
background-image: url(background.png);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
margin: 0px auto;
padding: 0px;
width: 100%;
overflow: hidden;
}
h1 {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
color: #e60000;
font-family: century gothic;
text-align: center;
color: #FF000;
}
h2 {
font-family: century gothic;
}
h3 {
font-family: century gothic;
}
h5 {
font-family: californian fb;
font-szie: 1.15em;
}
p {
border-top: none;
border-left: none;
border-bottom: none;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
table#sitelinks td {
font-size: 1.15em;
}
table#sitelinks tr:nth-child(odd) {
background-color: #fff
}
table tr:nth-child(even) {
background-color: #fff
}
table tr:nth-child(odd) {
background-color: #eee
}
hr {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
th {
text-align: left;
font-family: century gothic;
padding: 10px 0px 0px 0px;
font-size: 1.15em;
}
td {
font-family: century gothic;
border: 1px solid black;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 1em;
}
.center {
text-align: center;
}
.blue {
color: blue;
}
.bottomborder {
text-align: center;
border-bottom: 5px groove red;
}
a:link {
color: #e60000;
text-decoration: none
}
a:visited {
color: #e60000;
text-decoration: none
}
a:hover {
color: #e60000;
text-decoration: none
}
a:active {
color: #e60000;
text-decoration: none
}
.logo {
display: block;
margin: 0 auto;
height: 160px;
width: 160px;
}
.header {
padding-left: 140px
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
.navwrapper {}
.nav {
width: 79.31%;
text-align: center;
margin: 0px auto;
z-index: 2;
position: relative;
}
a:hover {
color: #FF0000;
}
/* NAVIGATION */
.navigation {
list-style: none;
margin: 0;
padding: 0;
height: 40px;
margin: 10px auto;
background: #FF0000;
float: left;
position: relative;
z-index: 10
}
.navigation,
.navigation a.main {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 0px 0px 0 0;
-webkit-border-radius: 0px 0px 0 0;
-moz-border-radius: 0px 0px 0 0;
}
.navigation a.main {
display: inline-block;
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.navigation:hover a.main {
color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.04);
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
position: relative;
z-index: 30;
overflow: visible;
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.3s;
-o-transition: 0.2s linear 0.3s;
transition: 0.2s linear 0.3s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.1s;
-o-transition: 0.2s linear 0.1s;
transition: 0.2s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n4 {
transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n6 {
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s
}
/* End Navigation */
/*Slideshow */
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
display: none;
overflow: hidden;
}
.slideshowimg {
min-width: 100%;
max-width: 100%;
max-height: none;
border: 2px solid #ffffff
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
min-width: 1000px;
min-height: 500px;
max-height: 500px;
position: fixed;
margin: 0px auto;
clear: both;
z-index: 1;
position: relative;
overflow: hidden;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 30px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
/* End Slideshow */
I fixed this on my own. I realized that since there was no more content under the drop-down menu, the page technically ended, hence the disappearing menu. At least that's my conclusion. After adding the intended content to the page, they worked just fine.

How can I disable mouseover function h tag area and png icon

Hi guys I have a problem. I want show just normal my text on the image. When I do mouseover should be change image opacity except my text and png icon, it's should be seen normal (without opacity ).Like that.Thanks http://demo.digipieces.com/gusteau-html/menu-1.html
.foodMenu {
text-align: center;
height: 210px;
width: 280px;
position: relative;
}
.foodMenu:after {
content:'\A';
position:absolute;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
top:0;
left:0;
width:100%; height:100%;
}
.foodMenu:hover:after {
opacity: 1;
}
.foodMenu .menuTitle {
font-weight: 300;
font-size: 32px;
text-align: center;
text-transform: none;
position: absolute;
bottom:30px;
left:0;
right:0;
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s cubic-bezier(x1,y1,x2,y2);
text-rendering: optimizelegibility;
opacity: 0;
}
.foodMenu:hover .menuTitle {
opacity: 1;
bottom: 70px;
}
.foodMenu .curve {
text-align: center;
text-transform: none;
position:absolute;
bottom:70px;
left:120px;
right:0;
opacity:0;
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s;
}
.foodMenu:hover .curve {
opacity: 1;
}
<div class="col span-1-of-4 step_box">
<div class="foodMenu js-wp-2">
<img src="http://lorempixel.com/output/food-q-c-280-210-1.jpg" alt="our menu meal">
<h3 style="color:#ffffff;" class="menuTitle">Meals</h3>
<img src="img/curve.png" alt="curve" class="curve">
</div>
</div>

Why Does My Image Overlap My Banner

here is my JsFiddle: JsFiddle
i want to know why my image/image caption overlap's my website banner? I'm pretty sure its something to do with my absolute positioning but I'm not 100% sure! I'm trying to have the image/image caption right under the banner. I don't want to position it with px/cm/in because it may be different across screen sizes!
Html:
<!doctype html>
<title>Untitled Document</title>
<body>
<div class="banner"><img src="http://i.imgur.com/7m4rahc.jpg" alt="Loading..."/></div>
<div id="mainwrapper">
<div id="box-3" class="box">
<img id="image-3" src="http://i.imgur.com/NEZfdM7.jpg"/>
<span class="caption fade-caption">
<h3>Click To Subscribe</h3>
<center>
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="AfterlifeGamingHD" data-layout="full" data-count="default"></div>
</center>
</span>
</div>
</div>
</body>
CSS:
charset "utf-8";
/* CSS Document */
body {
background-image: url(http://i.imgur.com/2MVANTR.jpg);
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
img, .banner {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#mainwrapper .box {
border: 5px solid #fff;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
width: 370px;
height: 470px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
position: absolute;
left: 0;
width: 370px;
height: 470px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
opacity: 0;
width: 370px;
height: 470px;
text-align: left;
padding: 15px;
}
#mainwrapper .box:hover .fade-caption {
opacity: 1;
}
position:absolute removes an element from the document flow, allowing other elements to take up the freed space. There seems to be no real reason for you using position: absolute, so just remove it...
#box-3{
position:relative;
top:500px;(set this to what you want it)
}
http://jsfiddle.net/J35sf/5/
You could just position it to where ever you want it. :)

overflow: hidden; on transitioning element

As you can see here (fiddle), a is the parent and is set to overflow: hidden;. span is the child and has box-shadow set. When nothing happens, everything goes well, but when a user hovers the a, its overflow property seems to get overwritten (i.e. the shadow is shown in a square, rather than a circle, as it should). Any idea how to solve this?
Code:
HTML
<span>Hover me</span>
CSS
a {
overflow: hidden;
width: 52px;
height: 52px;
top: 0;
display: block;
position: relative;
margin: 50px;
background: red;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
border-radius: 200px;
opacity: 0.6;
}
a:hover {
opacity: 1;
top: -8px;
}
a > span {
width: 100%;
height: 100%;
display: block;
box-shadow: inset 0 -35px 10px rgba(0,0,0,0.8);
}
a:hover > span {
box-shadow: inset 0 -28px 10px rgba(0,0,0,0.8);
}
your question is not understable but try this if it can help you then....
a {
overflow: hidden;
width: 52px;
height: 52px;
top: 0;
display: block;
position: relative;
margin: 50px;
background: red;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
border-radius: 200px;
opacity: 0.6;
}
a:hover {
overflow: hidden;
opacity: 1;
}
a > span {
overflow: hidden;
width: 100%;
height: 100%;
display: block;
box-shadow: inset 0 -35px 10px rgba(0,0,0,0.8);
}
a:hover > span {
overflow: hidden;
box-shadow: inset 0 -28px 10px rgba(0,0,0,0.8);
}

CSS3 :hover animation has z-index bug

Ok, so I have an empty <span> that is nested in side my <li>'s of an unordered list. The span holds a background image that is supposed to appear on :hover. The problem is that while the animation is transitioning, the z-index is wrong, the <span> stacks itself in front of the <a> element which precedes it in the DOM. As soon as the animation completes, however, the stacking order corrects itself. The result is a visual sudden "snap" of the effect and also the link becomes unclickable for the duration of the CSS3 transition.
Can anyone break down what is happening at the DOM level? How can I fix this?
You can see a working example that demonstrates the issue here: http://jsfiddle.net/qZkfw/1/
My HTML
<div id="nav">
<ul id="nav-main">
<li>Home<span></span></li>
<li>About<span></span></li>
<li>Get Fit<span></span>
<ul class="nav-secondary">
<li>Exercise Library</li>
<li>Find An Instructor</li>
<li>Fitness Tools</li>
</ul>
</li>
<li>Find An Instructor<span></span></li>
<li>Get Certified<span></span></li>
</ul>
</div>
my CSS
#nav-main li {
margin:0;
padding:5px;
position: relative;
display: block;
float: left;
margin-left: 10px;
}
#nav-main li a {
color: #97dd6e;
font-size: 1.1em;
text-decoration: none;
text-align: center;
margin-right: -7px;
line-height: 19px;
z-index: 99;
}
#nav-main li span {
height: 28px;
background: transparent url('/images/application/bg_nav_active_repeat.png') repeat-x top center;
display: block;
margin: -22px -5px 0 2px;
padding: 3px 0 0 0;
z-index: 98;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#nav-main li:hover span {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#nav-main li span:before, #nav-main li span:after {
content: '';
height: 28px;
width: 7px;
display: block;
background: transparent url('/images/application/bg_nav_active_before.png') no-repeat left top;
position: absolute;
top: 2px;
left: 0;
z-index: 999;
}
#nav-main li span:after {
background: transparent url('/images/application/bg_nav_active_after.png') no-repeat right top;
left: 100%;
}
Add position:relative; z-index: -1; to #nav-main li span.
Updated jsfiddle.
Edit:
I figured it out.
Static elements do not obey z-index, so you need to add position:relative; to #nav-main li a.
Updated jsfiddle.

Resources