I'm sorry this is going to be confusing, I have applied a js function to a div of a sidebar so when you click another bar slides from the left. But it used to work with the hover css function. The thing is on the sliding sidebar there are a few menus you can click. Now that I've changed the way the bar slides (with css), you can't click on them anymore.
My code is down there but the snippet isn't looking good at all because the dimensions are wrong I guess.. Sorry but you can see what it looks like here
function myFunction(x) {
x.classList.toggle("change");
}
<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navi .fa-chevron-down").toggleClass("rtoate180");
$("#navigation").slideToggle(500);
});
});
</script>
#more{
position:fixed;
top:0;
left:0px;
padding:5px;
font-size:20px;
line-height:40px;
text-align:center;
width:60px;
height:40px;
display:inline-block;
{block:IfSidebarRight}
right:0px;
left:auto;
{/block:IfSidebarRight}
}
.bar1, .bar2, .bar3 {
cursor:pointer;
position:relative;
left:18px;
top:25px;
width: 35px;
height: 5px;
background-color:{color:Main icon background};
margin: 6px 0px;
transition: 0.4s;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
-moz-transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
-ms-transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
-ms-transform: rotate(45deg) translate(-8px, -8px) ;
}
/*------ SIDEBAR -----*/
#sidebar{
width:300px;
height:100%;
margin-left:-300px;
{block:IfSidebarRight}
margin-left:300px;
{/block:IfSidebarRight}
top:0px;
}
.change ~ #sidebar2{
margin-left:365px;
{block:IfSidebarRight}
margin-left:-300px;
{/block:IfSidebarRight}
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*------ Narrow sidebar -----*/
#sidebar1{
z-index:10;
position:fixed;
top:0px;
left:0;
width:70px;
height:100%;
background:{color:Narrow sidebar background};
{block:IfSidebarRight}
right:0;
left:auto;
{/block:IfSidebarRight}
}
/*------ Wide sidebar -----*/
#sidebar2{
z-index:0;
position:fixed;
top:0px;
margin-left:65px;
width:220px;
height:100%;
background:{color:Wide sidebar background};
background-image:url({image:Wide sidebar background});
{block:IfWideSidebarBackgroundTransparent}
background:transparent;
{/block:IfWideSidebarBackgroundTransparent}
{block:IfSidebarRight}
margin-left:75px;
{/block:IfSidebarRight}
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Avatar */
#avatar {
margin: auto;
margin-top: 65px;
width: 50px;
height: 50px;
border-radius: 60px;
border:0px solid
z-index:10;
}
#avatar img {
width: 100%;
height: 100%;
border-radius: 100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#avatar img:hover {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
-ms-transform: scale(1.4, 1.4);
-webkit-transform: scale(1.4, 1.4);
transform: scale(1.4, 1.4);
}
/* Description */
#description{
position:relative;
margin-left:20px;
color:{color:Description};
background:{color:Description background};
border:5px solid {color:Description background};
max-height:300px;
padding:10px;
width:150px;
overflow-y:auto;
margin-top:20px;
font-size:13px;
line-height:18px;
}
#description:after{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 57px;
}
/* Search box */
#search{
margin-top:10px;
margin-left:20px;
width:180px;
height:30px;
overflow:hidden;
color:{color:Search};
background:{color:Search box background};
}
#search i{
position:absolute;
margin-left:67px;
margin-top:9px;
color:{color:Search}!important;
font-size:12px;
z-index:1000;
}
/* Navigation */
#navi{
cursor:pointer;
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navi .fa-chevron-down {
transition: all 0.7s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a:hover{
cursor:pointer;
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
/* Social icons */
#socialicons{
margin-top:0px;
}
#socialicons i{
display:inline-block;
color:{color:Navigation link}!important;
margin:5px;
font-size:15px;
}
#socialicons i:hover{
color:{color:Hover}!important;
}
/*----- MAIN CONTAINER -----*/
#container{
position:absolute;
top: 50px;
left:50%;
margin-bottom:10px;
min-height:500px;
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: -o-calc(100% - 100px);
width: calc(100% - 100px);
min-width:610px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index:1;
{block:IfShowHeader}
top: -moz-calc(100% + 50px);
top: -webkit-calc(100% + 50px);
top: -o-calc(100% + 50px);
top: calc(100% + 50px);
{/block:IfShowHeader}
{block:TagPage}
top:50px;
{/block:TagPage}
{block:SearchPage}
top:50px;
{/block:SearchPage}
{block:PermalinkPage}
top:50px;
{/block:PermalinkPage}
}
<div id="more">
<div id="sidebar">
<div id="sidebar1" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div id="avatar"><img src="{image:Avatar}"></div>
</div>
<div id="sidebar2">
<div id="description">
{Description}</div>
<div id="search">
<form action="/search" method="get"><i class="fa fa-search"></i>
<input type="text" name="q" value="SEARCH" style="position:absolute; left:20px; width:160px; height:25px; padding-left:10px; font-family:{select:Body font}; font-size: 12px; background:transparent; border:1px solid transparent; color:{color:Search};"/></form>
</div>
<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<!--Navigation-->
<div id="navigation">
<div id="navigationin">
{text:Link One Title}
{text:Link Two Title}
{text:Link Three Title}
{text:Link Four Title}
{text:Link Five Title}
</div>
<!--End navigationin-->
<div id="socialicons">
<center>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-flickr"></i>
<i class="fa fa-youtube"></i>
</center>
</div>
<!--End socialicons-->
</div>
</div>
<!--End sidebar1-->
</div>
<!--End sidebar-->
</div>
<!--End more-->
Thank you so much if you can help me I know it's not clear.. I'm sorry!
Use the developer tools and check out #container - it's covering your sidebar, so - you can't click what's under it.
Related
I've created an on/off button and I would like for the html's content's colors to invert when on and to be normal when off! And also I would like for the images and gifs to stay the same color.. I know it's complicated :x But the problem is since the button would be inside a div in html I can't use + space ~ or > to trigger the effect.. Does anyone know how it would be possible to do it please?
Here's the code for now but it's wrong for the html part..
function invertFunction(x) {
x.classList.toggle("invertbutton");
}
.invertfunction{
cursor:pointer;
position:fixed;
top:20px;
left:20px;
width:60px;
height:30px;
}
#onbutton{
width:60px;
height:30px;
background-color:#fff;
border-radius:10px;
border:1px solid #848484;
-webkit-transition:.3s ease;
-moz-transition:.3s ease;
-o-transition:.3s ease;
transition:.3s ease;
}
#movingbutton{
width:30px;
height:30px;
border-radius:10px;
border:1px solid #848484;
background-color:#BDBDBD;
-webkit-transition:.2s ease;
-moz-transition:.2s ease;
-o-transition:.2s ease;
transition:.2s ease;
}
.invertbutton #onbutton{
background-color:#42B94E;
}
.invertbutton #movingbutton{
transform: translate(30px);
}
.invertbutton .html{
-webkit-filter: invert(100%);
filter: invert(100%);
}
<html>
<div class="invertfunction"onclick="invertFunction(this)">
<div id="onbutton">
<div id="movingbutton"></div>
</div>
</div>
</html>
Thanks for the help! :)
You can use this code here:
function invertFunction(x) {
x.classList.toggle("invertbutton");
if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {
$("div:not(#movingbutton)").css('filter', 'invert(100%)');
$("img").css('filter', 'invert(100%)');
} else {
$("div:not(#movingbutton)").css('filter', 'invert(0%)');
$("img").css('filter', 'invert(0%)');
}
}
And you can remove this css:
.invertbutton .html{
-webkit-filter: invert(100%);
filter: invert(100%);
}
function invertFunction(x) {
x.classList.toggle("invertbutton");
if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {
$("div:not(#movingbutton)").css('filter', 'invert(100%)');
$("img").css('filter', 'invert(100%)');
} else {
$("div:not(#movingbutton)").css('filter', 'invert(0%)');
$("img").css('filter', 'invert(0%)');
}
}
div:not(#movingbutton) {
filter: invert(0%);
}
.invertfunction {
cursor: pointer;
position: fixed;
top: 20px;
left: 20px;
width: 60px;
height: 30px;
}
#onbutton {
width: 60px;
height: 30px;
background-color: #fff;
border-radius: 20px;
border: 1px solid #848484;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
#movingbutton{
width: 28px;
height: 28px;
border-radius: 20px;
border: 1px solid #848484;
background-color: #BDBDBD;
-webkit-transition: .2s ease;
-moz-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
}
.invertbutton #onbutton {
background-color: #42B94E;
}
.invertbutton #movingbutton {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="invertfunction"onclick="invertFunction(this)">
<div id="onbutton">
<div id="movingbutton">
</div>
</div>
</div>
<br>
<br>
<br>
<div style="background-color: red;" height="100px" width="100px">Example div1</div>
<div style="background-color: green;" height="100px" width="100px">Example div2</div>
<div style="background-color: blue;" height="100px" width="100px">Example div3</div>
<div>
<img width="100px" src="http://www.lyricsmode.com/i/upictures/205882.gif">
</div>
CodePen example
I have a dropdown menu and want the arrow on the right of it to turn 180deg when I click on it! The problem is I've set the arrow in the html and not in the javascript.. But I thought there was maybe a way to put it in the css when going from #navi to #navigation..
Here's my code
<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navigation").slideToggle(500);
});
});
</script>
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<div id="navigation">
<div id="navigationin">
Sorry I can't seem to make it work.. Thank you for any help you can give!
(if you want the actual exemple it's on www.typhotoshop.tumblr.com in the left hovering bar)
All you have to do is , adding css3 transition on your arrow , and adding/removing a custom class to this last to rotate 180° , in which the transition is triggered.
#navi .fa-chevron-down {
transition: all 0.5s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
add in js the toggleclass when click on navi
$("#navi .fa-chevron-down").toggleClass("rtoate180");
bellow working snippet :
$(document).ready(function(){
$("#navi").click(function(){
$("#navi .fa-chevron-down").toggleClass("rtoate180");
$("#navigation").stop().slideToggle(500);
});
});
#navi .fa-chevron-down {
transition: all 0.5s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navi"> NAVIGATION
<i class="fa fa-chevron-down"></i>
</div>
<div id="navigation">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
<div id="navigationin"></div>
you can use css to do your desire output as well
margin-top: 100px;
transform: rotateY(180deg);
<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navigation").slideToggle(500);
});
});
</script>
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
<div id="navigation"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<div id="navigation">
<div id="navigationin">
I'm trying to add an image when the checkbox is checked, I'm trying adicionala to append but could not add someone could help me?
HTML
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}
.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}
.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}
.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}
.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform:scale(1.0);
-webkit-transform:scale(1.0);
transform:scale(1.0);
}
.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}
.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary cke">
<input type="checkbox" value="nao"><i class="fa fa-heart"></i>
</label>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script>
$('input[type=checkbox]').change(function(){
if($('input[type=checkbox]:checked') == true){
$("hovereffect").append('<img id="heart" class="img-responsive" src="../images/heart.png">');
return;
}
});
</script>
how do I can do this to add an image of the heart when the checkbox is checked
Your class is hovereffect so jquery syntax will be
$(".hovereffect") instead of
$("hovereffect")
I have a slide out tab that currently shows by default on the left side of my page and hides when the button is clicked, then slides out to be visible again when you click it. How can I set the tab to be hidden by default? Here is my code:
HTML:
<aside id="share-wrapper">
<div id="sharebutton">></div>
<div id="share">
<div class="share-box"><div class="facebook-share">f</div></div>
<div class="share-box"><div class="twitter-share">t</div></div>
<div class="share-box"><div class="google-share">g</div></div>
<div class="share-box"><div class="insta-share">i</div></div>
</div>
</aside>
CSS:
#share-wrapper {
float:left;
width:40px;
height:180px;
margin-top:80px;
}
#share {
border:thin solid #333;
border-left:0px;
border-radius:0px 6px 6px 0px;
width:30px;
padding:0px 5px;
height:170px;
}
#sharebutton {
color:#333;
border:thin solid #333;
height:30px;
width:30px;
border-radius:15px;
text-align:center;
line-height:30px;
margin: 0px 0px 10px 5px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
#sharebutton:hover { color:#eee; background-color:#333; cursor:pointer; }
#sharebutton.open {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
.share-box,
.share-box img {
width:30px;
height:30px;
}
.facebook-share,
.twitter-share,
.google-share,
.insta-share { width: 100%; height: 100%; line-height: 30px; text-align: center; color:#333; border:thin solid #333; border-radius:15px; margin:10px 0px; background-color:#eee; cursor:pointer;}
.facebook-share:hover,
.twitter-share:hover,
.google-share:hover,
.insta-share:hover { background-color:#333; color:#eee; }
jQuery:
$(document).ready(function () {
$("#sharebutton").click(function () {
$("#share").toggle("slide");
if ($("#sharebutton").hasClass("open")) {
$("#sharebutton").removeClass("open");
}
else {
$("#sharebutton").addClass("open");
}
});
});
Change your js to this. You hide your share div and add the open class to your sharebutton.
So you have the exact same status as you would click the sharebutton.
$(document).ready(function () {
$("#share").hide(); // You set display:none to your share div
$("#sharebutton").addClass("open"); // You add the open class to the sharebutton
$("#sharebutton").click(function () {
$("#share").toggle("slide");
if ($("#sharebutton").hasClass("open")) {
$("#sharebutton").removeClass("open");
}
else {
$("#sharebutton").addClass("open");
}
});
});
JsFiddle
.text {
position: absolute;
font-family: "courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255,255,255,0.7);
width: 100%;
line-height:50px;
text-align: center;
z-index:10;
opacity: 0;
display:block;
height:100%;
overflow: hidden;
top:0; left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:1;
}
This is css for my hover over image and text appreance.
http://jsfiddle.net/LbLHc/
here is what i have. How do i put the text inside of my image when i hover over?
thank you
Here is solution for you problem.
Html Code
<div class="row">
<div class="relative imgContainer">
<a href="works/nytimes/nytimes.html">
<span class="text">NY times magazine: Table of Contents</span>
<img src="http://placehold.it/500x200" class="img-responsive" />
</a>
</div>
<div class="relative imgContainer">
<span class="text">Eloquence Magazine</span>
<img src="http://placehold.it/700x500"class="img-responsive" />
</div>
</div>
**Css Code**
.imgContainer:hover .text{
display:block;
opacity:1;
}
.relative{
position: relative;
}
.imgContainer{
height: 250px;
width: 400px;
margin-bottom: 20px;
}
img{
height: 250px;
width: 400px;
}
.text {
position: absolute;
font-family: "courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255,255,255,0.7);
display:none;
width: 100%;
height:100%;
text-align: center;
top:0; left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
display:block;
opacity:1;
}
FiddleLink
http://jsfiddle.net/anu1718/Y2AYj/
If I understand it correctly, you want to hide the text by default, and only show it when hovering over the image. IF you want to use just simple CSS for that, you need to have a common container for the image and the text (the latter one being absolutely positioned and hidden), and add a CSS rule targeting the :hover state of the container to show the text.
In your code I added a class (fadingtext) to the container:
<div class="row">
<div class="col-xs-4"> <a href="works/nytimes/nytimes.html">
<span class="text">Title</span>
<img src="http://placehold.it/500x200" class="img-responsive"/>
</a>
</div>
<div class="col-xs-4 fadingtext"> <span class="text">Text that fades on hover</span>
<img src="http://placehold.it/700x500" class="img-responsive" />
</div>
</div>
And here is your CSS with the fixed selectors:
.fadingtext .text {
position: absolute;
font-family:"courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255, 255, 255, 0.7);
width: 100%;
line-height:50px;
text-align: center;
z-index:10;
opacity: 0;
display:block;
height:100%;
overflow: hidden;
top:0;
left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.fadingtext:hover .text {
opacity:1;
}
Here is a modified version of your jsfiddle:
http://jsfiddle.net/Rws85/2/