Alright, so I know very little about coding. I've been working for hours to customize a page, and I made substantial progress. However, I have hit a bit of a hiccup once more that has been tiding me over for the past three hours.
I began working with a page code with a large sidebar image. What I wanted to do, and would still like to do, is fade the image so it's darker, with text fading in overtop it. I've managed to get the image to fade as I want it, and I've gotten the text and title of the page to fade in properly. The problem, though, is the opacity.
This is a question I've seen asked many times, but none of the answers have worked for me. Most of the times, I'm seeing people saying that their sidebar is parented to their text. I do NOT think that is the issue with mine, as both the sidebar and the text, called the description in this instance, each have their own
I've gotten the text's opacity to be unaltered by the opacity of the sidebar, however, when I make this change, it messes up the page entirely. The description is off in a random place and the links either disappear or end up on the other end of the page.
I'm not sure what the problem is, and I would LOVE some help as this has been all I've worked on all day aside from watching Game of Thrones. I would love any and all help available, I'm quite desperate at this point and my own patience in regards to digging through the coding has run quite thin. Thank you all in advance for reading!
Here is the coding below:
/* Sidebar */
#sb {
width: 550px;
position: fixed;
height: 100%;
z-index: 1;
margin: 30px 0 0 0;
}
#sidebar {
width: 500px;
height: 100%;
padding-top: 297px;
background: url({image:Sidebar bg}) no-repeat;
float: left;
opacity:1;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease-in-out;
}
#sidebar:hover{
opacity:.3;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease-in-out;
}
#sb_border {
float: right;
width: 50px;
height: 100%;
min-height: 900px;
background: {color:Lines};
padding-top: 250px;
}
#title {
margin-left: 35px;
text-align: left;
font-family:josefin sans;
font-size: 24px;
color: {color:Blogtitle};
text-shadow: 1px 1px 1px {color:Blogtitle textshadow};
letter-spacing: 0;
margin-bottom: 10px;
opacity:0;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease-in-out;
}
#title:hover {
opacity:1;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease-in-out;
}
#description {
width: 235px;
margin-left: 35px;
color: {color:Description};
font-size: 8px;
text-align: left;
line-height: 10px;
margin-bottom: 10px;
text-transform: uppercase;
opacity:0;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease-in-out;
}
#description:hover {
opacity:1;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease-in-out;
}
#desc b {
font-size: 10px;
}
#menu {
width: 50px;
text-align: center;
font-size: 8px;
font-weight: bold;
}
#menu a:link, #menu a:visited, #menu a:active {
text-transform: uppercase;
display: inline-block;
color: {color:Menulink};
margin-bottom: 5px;
width: 50px;
padding: 4px 0;
border-bottom: 1px solid transparent;
}
#menu a:hover {
color: {color:Menulink hover};
border-bottom: 1px solid {color:Menulink hover border};
background: {color:Menulink hover bg};
}
#pagination {
text-align: center;
font-size: 14px;
}
#pagination a:link, #pagination a:visited {
margin: 5px 0;
}
<!-- Custom CSS -->
<style type="text/css" media="screen">
{CustomCSS}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<body>
<!-- Sidebar -->
<div id="sb">
<div id="sidebar">
<div id="title">{Title}</div>
<div id="description">{Description}</div>
</div>
<div id="sb_border">
<div id="menu" style="margin-bottom: 5px;">
home<br />
askbox<br />
{Block:ifShowLink1}{text:link1}<br />
{/Block:ifShowLink1}
{Block:ifShowLink2}{text:link2}<br />
{/Block:ifShowLink2}
{Block:ifShowLink3}{text:link3}<br />
{/Block:ifShowLink3}
{Block:ifShowLink4}{text:link4}<br />
{/Block:ifShowLink4}
{Block:ifShowLink5}{text:link5}
{/Block:ifShowLink5}
</div></div>
<div id="pagination">
{block:Pagination}
{block:PreviousPage}«
{/block:PreviousPage}
{block:NextPage}»
{/block:NextPage}
{/block:Pagination}
</div>
</div>
</div>
Your problem is with positioning. You need to position <div id="description">...</div> so it lays over top of <div id="sidebar">...</div>.
You also don't need a :hover property for "sidebar" only for "description".
I made a JSFiddle example for you: Click here and hover over the image to see the effect.
Let me know if you have any questions.
Related
I have a picture that when you hover over it, a fading caption would appear
Here is the jfiddle
https://jsfiddle.net/e9dwbdyn/4/
I want it to look like this however:
I think it has to do with this part but I'm not sure how to exactly format it. Any advice/help would be appreciated. Thanks!
figcaption {
position: absolute;
top:35%;
width: 80%;
height:50%;
left:10%;
font-size: 14px;
color: white;
background-color: #9F8F53;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
Try this one https://jsfiddle.net/e9dwbdyn/6/
figure {
position: relative;
display: block;
margin: 5px 0 10px 0;
width:350px;
}
figcaption {
position: absolute;
top:30%;
width: 80%;
height:40%;
left:10%;
font-size: 20px;
font-family: "Arial, Helvetica, sans-serif";
text-align: center;
color: white;
background-color: #000;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
figure:hover figcaption {
opacity: 0.5;
}
.product-name a {
color: #fff;
}
.product-name a:hover {
color: #fff
}
.product-name, .desc_grid, .price {
padding: 0px;
margin: 0px;
}
}
You would still need to play around with some margins, text fonts and sizes to get the exact match.
you may use figcaption as flex container
https://jsfiddle.net/e9dwbdyn/5/
figure {
position: relative;
display: block;
margin: 5px 0 10px 0;
width:350px;
}
figcaption {
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
display:flex;
font-size: 14px;
color: white;
}
figcaption>div {
background-color: #9F8F53;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
margin:auto;
text-align:center;
width:80%;
}
figure:hover figcaption div {
opacity: 0.7;
}
.product-name
<figure>
<img src="https://goodnessofgodministries.files.wordpress.com/2012/03/bugia_candlestick_.jpg" alt="Candlesticks" style="width:350px" />
</a>
<figcaption>
<div class="product-shop">
<h3 class="product-name">Candlesticks<span class="over"></span></h3>
<p class="desc_grid">lorem ipsum</p>
<div class="price-box">
<span class="regular-price" id="product-price-3-new">
<span class="price">$50.00</span></span>
</div>
</div>
</figcaption>
</figure>
When positioning elements absolutely it is always a good idea to incorporate a bit of flexibility. The issue with your code, is that you try to vertically center the element by estimating the top and left value in percentages, which isn't that flexible: What if the images inside the figure element have different sizes and aspect ratios? If so, these estimated percentages will not work in every instance and would potentially require you to manually change the value with each image.
In the example you present, it looks as if the height of the transitioned element is determined by its own content, rather than having set a specific height as in your code.
Example 1 (height determined by the content inside) works with browsers from IE9 and up:
figcaption {
position: absolute;
top: 50%; /* Always 50% from the top */
transform: translateY(-50%); /* Extracting half of the content height to vertically center */
width: 80%;
left: 0;
right: 0;
opacity: 0;
margin: 0 auto;
font-size: 14px;
padding: 1em;
color: white;
background: rgba(194, 145, 57, 0.7); /* Use semitransparent background instead of opacity for readability reasons */
transition: opacity .5s;
}
figure:hover figcaption {
opacity: 1;
}
Example 2 (fixed height) should work in all browsers:
figcaption {
position: absolute;
height: 50%; /* Fixed height */
width: 80%;
top: 0; /* Filling the whole space with top, left, bottom, right */
left: 0;
right: 0;
bottom: 0;
opacity: 0;
margin: auto; /* Using margin: auto; the space around is distributed evenly */
font-size: 14px;
padding: 1em;
color: white;
background: rgba(194, 145, 57, 0.7);
transition: opacity .5s;
}
In the not-too-distant future Flexbox has to be the preferred method, as it does all the calculations for you.
I use some pretty straightforward css to show a larger image on hover. This is the HTML structure:
<div class="Enlarge">
<img src="small.jpg" />
<span><img src="large.jpg" /></span>
</div>
And here's the CSS:
.Enlarge {
position:relative;
}
.Enlarge span {
position:absolute;
left: -9999px;
}
.Enlarge span img {
margin-bottom:5px;
}
div.Enlarge:hover{
z-index: 999;
cursor:pointer;
}
div.Enlarge:hover span{
top: 110px;
left: 0px;
z-index: 999;
width:500px;
height:300px;
padding: 10px;
background:#eae9d4;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius:8px;
font-family: 'Droid Sans', sans-serif;
font-size:12px;
line-height:18px;
text-align: center;
color: #495a62;
padding-bottom:20px;
}
However, I would like to add an ease in/out effect to the larger image. I couldn't work that out. If I apply the transition to the , the image will slide in from the left side. This is not what I want. If I apply the effect to the image, it won't work.
Here's the example: Example
Thanks in advance for your input!
Using visibility and opacity you can achieve a fade effect.
JSFiddle Demo
Add these styles:
.Enlarge span {
position:absolute;
left: -9999px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
div.Enlarge:hover span {
visibility: visible;
opacity: 1;
/* rest of your styles below */
I am trying to create a nice hover effect for a my project i am working on and the overflow hidden doesn't seem to be working in safari Take a look. learn.michaelscimeca.com
HTML:
<div class="thumnnail">
<img class="mainbg" src="img/shoppee.jpg" alt="">
<div class="textbox">
<img src="/img/eye.png" alt="">
<span class="launch">View Project</span>
</div>
</div>
CSS:
.thumnnail .textbox .launch a {
margin-left: -78px;
text-align: center;
margin-top: 10px;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
padding: 15px 40px;
position: absolute;
top: 45px;
left: 50%;
background-color: #1c51c8;
border-radius: 100%;
text-transform: uppercase;
-ms-transition: all .5s ease;
/* this is for the animation effect to bring the textbox down to up and up to down */
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.thumnnail .textbox .launch a:hover {
background-color: #093db4;
}
.thumnnail:hover {
border: 10px solid #0d46c8;
/* this is to alter the border on rollover */
border-radius: 100%;
/* this is to round out the div tag */
/* to get rid of the greyscale on rollover */
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%);
overflow: hidden! important;
}
.thumnnail:hover img {
/* width:120%;
height:120%;*/
}
.thumnnail:hover .textbox {
height: 100px;
}
Change your transition from:
transition: all .5s ease;
to:
transition: border .5s ease;
And then post your CSS and HTML so that other people can see what the problem was.
In Chrome and Safari, the text in this code (http://codepen.io/igdaloff/pen/cgCFt) wiggles subtly when hovered. I'd like the text to remain stable throughout the transition.
I've tried several alternative methods to accomplish this same effect (explained in this post), but the wiggle remains.
I need the text to remain vertically centered and the content to be completely fluid (percentages only). As long as those requirements are true, I'm open to any solutions. I'm using the most recent browser versions.
Thanks in advance.
HTML
<div class="work-home">
<ul>
<li>
<a href="">
<img src="..." />
<h4>Goats</h4>
</a>
</li>
</ul>
</div>
CSS
.work-home {
text-align: center;
}
.work-home li {
display: inline-block;
position: relative;
margin: 0 0 2em;
width: 100%;
}
.work-home li:hover a:before {
opacity: 1;
top: 5%;
left: 5%;
right: 5%;
bottom:5%;
}
.work-home li:hover h4 {
opacity:1;
}
.work-home img {
width: 100%;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.work-home a:before {
content:"";
display:block;
opacity: 0;
position: absolute;
margin: 0;
top:0;
right:0;
left:0;
bottom:0;
background-color: rgba(0, 160, 227, 0.88);
-webkit-transition: all linear .3s;
-moz-transition: all linear .3s;
-ms-transition: all linear .3s;
transition: all linear .3s;
}
.work-home h4 {
display: block;
padding: 0;
margin:0;
font-family: helvetica, sans-serif;
font-size: 4em;
color: #ffffff;
position:absolute;
top:50%;
margin-top:-.8em;
text-align:center;
width:100%;
z-index:1;
opacity:0;
-webkit-transition: all linear .3s;
-moz-transition: all linear .3s;
-ms-transition: all linear .3s;
transition: all linear .3s;
}
Okay, so I can't figure out why this isn't working.
The hover effect with the fade in doesn't seem to be applying to this.
css
.panel_button {
}
.panel_button a {
webkit-transition: all 10.0s ease;
-moz-transition: all 10.0s ease;
transition: all 10.0s ease;
background-color: #000;
display: block;
width: 50%;
height: 160px;
color: #000099;
font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
background: #808080;
color: #FFFFFF;
}
Header page
<div class="panel_button" style="display: visible;"> BLOG </div>
The website where this code is implemented is at niu-niu.org
Thank you!
Your webkit-transition: all 10.0s ease; is missing the dash at the beginning. Change it to this:
-webkit-transition: all 10.0s ease;