Hi guys i have this code : LINK here
image in this have a link should open it when click .
but when you hover the image the url doesn't working ! (why ?)
sorry for my bad english!
<div class="entry">
<a href="http://google.com">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS12iyyT_pG8r8V2IkiIsL7RHw-BLWjCvqQVgMzXLnLjt3KoCbf" alt="<?php the_title(); ?>" class="postimage" />
</a>
</div>
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div.entry:hover:after {
opacity:1;
}
You can do this by adding pointer-events: none to the overlay (or .entry:after in your case). No javascript needed for that. Example:
div.entry:hover {
content:'Click on image for more information';
/* ... other css rules */
pointer-events: none;
}
Now your click will not be 'captured' but it 'bubbles up' to the underlying div.
But, as usual, IE is a troublemaker... This only works for IE11. For other IE versions you'd need javascript anyway...
Your overlay is appearing ABOVE the link, so no click is detected (you're clicking the overlay, not the link). You can change the overlay to be a part of the link instead. See: http://jsfiddle.net/U3QYY/3/
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
a:before {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
a:hover:before {
opacity:1;
}
Most probably this part in your CSS is creating the problem.
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
Notice when you hover the mouse over the image the div.entry:after properties are hiding the linked image behind hence disallowing you to open it.
So now I think you had got the problem and you can solve it yourself in your way.
Related
I want to fade the borders of an image to smoothly blend to the background image.
Like this:
All suggestions in internet are about using box-shadow inset and to set the same solid color to the parent element, but it wouldn't work for my case. Trick with box-shadow with 0.5 alpha or so it's also unuseful.
What could I do? Prefer CSS but maybe canvas and javascript could be necessary.
I would consider duplicating the image using pseudo element where I apply blur filter:
.box {
width:400px;
height:200px;
background:var(--i);
position:relative;
overflow:hidden;
}
.box:before {
content:"";
position:absolute;
top:0;
right:0;
width:30%;
bottom:0;
background-image:var(--i);
background-position:right;
filter:blur(20px);
}
.box:after {
content:"";
position:absolute;
top:0;
left:0;
width:30%;
bottom:0;
background-image:var(--i);
filter:blur(20px);
}
<div class="box" style="--i:url(http://lorempixel.com/400/200/)">
</div>
I'm making a static website, I fixed the navigation menu on the top
as a fixed header section.
The problem is arising that whatever content I add next to it is overlapping on the top of the menu.
Adding a relative position to the content acts in the same way.
Setting position as absolute is obviously the only thing that works but then I will have to add a whole lot of margins and that will make the site too unstable.
This is my CSS for the menu and i don't have really anything in the main CSS due this problem.
nav {
position: fixed;
top: 0;
background:none;
z-index:10000;
width:100%;
font-size:34px;
transition: all 0.5s;
}
nav.navScroll {
background: #013D5F;
font-size:20px;
transition: all 0.5s;
color: #fff;
}
img.logo {
float:left;
display:none;
transition: all 0.5s;
}
img.logoScroll {
display:inline;
width:50px;
padding:5px;
transition:all 0.5s;
}
div.menu {
text-align:center;
}
div.menuScroll {
float:right;
}
ul {
padding-left:0;
margin-left:0;
}
li.nav {
display:inline;
text-decoration:none;
padding-left:15px;
}
li.nav a {
list-style-type: none;
text-decoration:none;
color: white;
font-weight:400;
}
li.nav a:hover {
color: #FFD634;
transition: 1.2s;
}
.navScroll li.nav a {
color:#fff;
}
.navScroll li.nav a.selected {
color: #FFD634;
}
Jaromanda X correctly indicates that fixed position elements are taken out of flow. You must add a margin to the page body, or main container, equal to the height of your nav element. Your 'z-index:10000;' will prevent any scrolling elements from covering up your nav, provided nothing is given a higher z-index ;)
I have two push menu's: left and right. The right push menu is not working correctly when viewed on a mobile (issue 1 below). Additionally, neither menu's work in IE 11 (issue 2 below).
Mobile - On a mobile, when you open the left push menu and then
close it the right menu pushes into view and you cannot get rid of
it.
IE issue - In IE 11 the push menus do not appear, with the cause, as
far as I can tell, being: position:fixed; as applied to
menu-push-left and menu-push-right elements. I originally had
position:absolute; but this would cause the menu-push-right element
to just appear when opened in IE instead of "sliding" in. I have no
idea why the position:fixed; does not work in this instance of IE.
IE 7+, last I knew, supports position:fixed;
Could someone take a look at my code and tell me what I may have missed?
The JsFiddle is here: http://jsfiddle.net/totaleeyou/0w5w4t4s/8/
body {
color:#2c2c2c;
background-color:#ffffff;
padding:0;
margin:0;
font-size:1em;
font-family:Arial, Helvetica, sans-serif;
overflow-x:hidden;
}
body.has-active-menu-push-left,
body.has-active-menu-push-right {
overflow:hidden;
}
body, header.scroll, header ul.logo, #menu-push-left, #menu-push-right, button.menu-close i.fa-times-circle-o, .page-masking {
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition: all 0.5s;
}
body.has-active-menu-push-left, #menu-push-left {
-webkit-transform:translate(100%, 0);
-moz-transform:translate(100%, 0);
-ms-transform:translate(100%, 0);
-o-transform:translate(100%, 0);
transform:translate(100%, 0);
}
body.has-active-menu-push-right, #menu-push-right {
-webkit-transform:translate(-100%, 0);
-moz-transform:translate(-100%, 0);
-ms-transform:translate(-100%, 0);
-o-transform:translate(-100%, 0);
transform:translate(-100%, 0);
}
#media only screen and (min-width:780px) {
body.has-active-menu-push-left, #menu-push-left {
-webkit-transform:translate(500px, 0);
-moz-transform:translate(500px, 0);
-ms-transform:translate(500px, 0);
-o-transform:translate(500px, 0);
transform:translate(500px, 0);
}
body.has-active-menu-push-right, #menu-push-right {
-webkit-transform:translate(-500px, 0);
-moz-transform:translate(-500px, 0);
-ms-transform:translate(-500px, 0);
-o-transform:translate(-500px, 0);
transform:translate(-500px, 0);
}
}
.wrapper {
width:100%;
padding:0;
position:relative;
}
#media only screen and (min-width:780px) {
.wrapper {
width:1000px;
margin:0 auto;
padding: 0 5px;
}
}
#page-masking {
position:fixed;
}
.page-mask {
z-index:100;
top:0;
left:0;
width:0;
height:0;
background-color:#bec4a6;
}
.page-mask.is-active {
width:100%;
height:100vh;
opacity:.7;
-webkit-transition:opacity .5s;
transition:opacity .5s;
}
.close-container {
width:100%;
height:55px;
padding:5px;
position:relative;
}
button.menu-close {
color:#fdbc5d;
text-decoration:none;
font-size:3em;
position:absolute;
top:5px;
right:25px;
display:block;
border:none;
background:none;
}
#menu-push-left,
#menu-push-right {
position:fixed;
top:0;
width:100%;
height:100vh;
z-index:150;
overflow-x:hidden;
overflow-y:auto;
background-color:#0079c1;
}
#menu-push-left {
left:-200%;
}
#menu-push-right {
right:-200%;
}
#media only screen and (min-width:780px) {
#menu-push-left {
width:500px;
left:-1000px;
}
#menu-push-right {
width:500px;
right:-1000px;
}
}
I changed the position of your menues to 'fixed', and that seemed to do the trick =)
#menu-push-left, #menu-push-right {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
z-index: 150;
overflow-x: hidden;
overflow-y: auto;
background-color: #0079c1;
}
i am having some trouble configuring my javascript with my css so that when an image is clicked a little caption bar will appear with icons in it. Currently when i hover over the image the caption bar appears but i want to change this so that it will be usable for users on tablets where they have to touch and don't have the hover feature.
View page
<figure>
<img width="158" height="158" alt="Gravatar"
data-bind="attr:{src: GravatarUrl}" />
<figcaption>
<a title="Email" id="emailIcon" class="icon-envelope icon-white"
data-bind="attr:{'href':'mailto:' + Email()}"></a>
<a title="Profile" id="profileIcon" class="icon-user icon-white"></a>
</figcaption>
</figure>
CSS
figure, figcaption {
display: block;
}
figure {
position:relative;
float:left;
margin:20px;
width:158px;
height:158px;
border:1px solid #333;
overflow:hidden;
background: #fff;
padding: 1px;
}
figure figcaption {
position:absolute;
bottom:0;
left:0;
opacity: .75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
}
figure.open figcaption {
margin-bottom:0px;
}
figcaption {
width:160px;
height:25px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}
Javascript Not sure if there is a way to do it with just css or not.
<script type="text/javascript">
(function ($) {
$.views.Roster.GetRoster('#url');
$('figure').on('click', function (event) {
$(event.currentTarget).toggleClass('open');
});
})(jQuery);
</script>
It's a great idea to just toggle a class and leave the visible elements to CSS.
$('figure').on('click', function (e) {
$(this).toggleClass('open');
});
In that case, style your figcaption the way you want it to look and then add:
figcaption { display: none; }
.open figcaption { display: block; }
This way, when the figcaption is hidden by default but when you click the target and the javascript adds the class "open" the figcaption will be visible. You certainly don't have to have it display block, it could be most anything other than "none."
If this code
figure:hover figcaption {
margin-bottom: 0px;
}
is showing the figcaption and you are putting open class to the figure when you want to show it, you can use:
figure:hover figcaption, figure.open figcaption {
margin-bottom: 0px;
}
Here is an example of what I want to achieve - http://home.mcafee.com/default.aspx
I would like to know how to get the feedback tab/button to the right of the page to slightly open not completely slide out. And then on clicking, I would like to open a page (not a jquery form, but a page).
Any help?
Thanks in advance.
CSS3 transitions
#feedback {
transition:width 1s;
-moz-transition:width 1s; /* Firefox 4 */
-webkit-transition:width 1s; /* Safari and Chrome */
-o-transition:width 1s; /* Opera */
background:#ccc url(http://home.mcafee.com/OpinionLab/img/oo_tab_icon.gif) no-repeat 50% 90%;
position:fixed;
width:30px;
height:100px;
border:solid #666 1px;
right:-10px;
top:30%;
padding:0px 5px 5px 0px;
}
#feedback:hover
{
width:50px;
}
Try this http://jsfiddle.net/heera/q5Nu2/5 and you have to use a background image to show a vertical button.
CSS
#feedback{
background:#ccc url(http://home.mcafee.com/OpinionLab/img/oo_tab_icon.gif) no-repeat 50% 90%;
position:fixed;
width:30px;
height:100px;
border:solid #666 1px;
right:-10px;
top:30%;
padding:0px 5px 5px 0px;
}
#feedback img{width:100%;height:70px;border:solid black 1px;}
HTML
JS
$('a#feedback').hover(function(e){
$(this).animate({'right':'-1px'}, 500);
},
function(e){
$(this).animate({'right':'-10px'}, 500);
});