Need a little help here (CSS)

February 13, 201412 yr

Hi guys, I am coding my website and have a little problem about the CSS. You can check this link below:

I want the content inside the tags dt & dl work on the picture and they will come from right & left of the pic when the user move the cursor on the pic but I didnt know why the CSS do not work and I cant see my problem. Please check it on the link above and fix it for me if you have free time ( and please tell me what I am wrong? )

Thank you so much

February 13, 201412 yr

You have a couple of typos

.work figure: hover dl {
    opacity: 1;
}

figure:hover .one {
    right: :0px;
    opacity: 1;
}

consider using transform: translate, rather than absolutely positioning your elements (for animation).

http://jsfiddle.net/rBV9j/

- needs cleaning up, I just added the translate

see here:-

http://css-tricks.com/tale-of-animation-performance/

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

nguyenhce and rbrtsmith
2

February 13, 201412 yr

I second what Wynn has said. Properties such as css transforms are hardware accelerated and you will get a smoother transition than adjusting the left.or right positioning. You don't need to worry about backwards compatibility as the transition timing to give the animation is also ignored by these browsers (IE8 for these you just target them with the right / left property if the element being moved is critical to your design / function.

nguyenhce
1

February 13, 201412 yr

Author

Thank you guys so much. Now I learn great exp for my front-end knowledge. I will fix my code.

Again, thank you.

February 13, 201412 yr

Author

You have a couple of typos
.work figure: hover dl {
    opacity: 1;
}

figure:hover .one {
    right: :0px;
    opacity: 1;
}
consider using transform: translate, rather than absolutely positioning your elements (for animation).

http://jsfiddle.net/rBV9j/

- needs cleaning up, I just added the translate

see here:-

http://css-tricks.com/tale-of-animation-performance/

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Hi Wynn, So you want to told me that use transform:translate() making the contents just appear on the picture, not come from left and right ?

February 13, 201412 yr

You'd need to add the vendor prefixes, (I didn't realise chrome, safari and opera still relied on -webkit-)

.one {
    -moz-transform: translateX(-200px);
    -ms-transform: translateX(-200px);
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
}
.two {
    top:100px;
    -moz-transform: translateX(200px);
    -ms-transform: translateX(200px);
    -webkit-transform: translateX(200px);
    transform: translateX(200px)
}

figure:hover .one {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}
figure:hover .two {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}

Edited February 13, 201412 yr by Wynn

nguyenhce
1

February 14, 201412 yr

Author

Thanks for that Wynn. But I still do not understand what's happening on my code,it still not work until I deleted the opacity on .work figure dl. But on your JSFiddle link it's working with this opacity is 0. What's wrong with my code Wynn? Although I try to put z-index in the end, it's still not working.

.work figure dl {
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 20px;
    margin: 0;
    line-height: 2.5;
    background: rgba(0,0,0,0,;
    color: white;
    transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
}

February 14, 201412 yr

Did you remove the space before hover?

.work figure:hover dl {
    opacity: 1;
}

nguyenhce
1

February 14, 201412 yr

Author

Oh man, you're right, I need to clean space before hover =.=. Thank you so much Wynn, it's working now

February 22, 201412 yr

Author

Hi Wynn, relate with these post above. I try to make the pic boxes scale down when user click on the menu ( i.e: websites ), and I want the animation of .one and .two will not display when boxes scale down but the do not work on jQuery file. Can you please review it and tell me what I am wrong? Thank you

This is my HTML:

<div id="container">
	<div class="avatar">

	<figure class="my-pic">
	   <img src="img/nguyen-2.png" alt="Nguyen Tran"/>		
	</figure>

	</div><!--End .avatar-->
				
	<nav>
	    <ul>
		<li id="all">ALL</li>
		<li id="web">WEB</li>
		<li id="mobile">MOBILE APP</li>
		<li id="testimonial">TESTIMONIAL</li>
		<li id="contact">CONTACT</li>
	    </ul>
	</nav>
				
			
	<section class="work">
		<figure class="web">
			<a href="#">
				<img src="img/web-Raymond.png" alt="web-Raymond" />

				<dl>
				  <div class="one">
					<dt>Client</dt>
					<dd>Raymond Brown</dd>
				</div>		
								
		<figure class="mobile">
			<a href="#">
				<img src="img/web-antking.png" alt="web-antking" />

				<dl>

				  <div class="one">
					<dt>Client</dt>
					<dd>Antking</dd>
				  </div>

				  <div class="two">
					<dt>Role</dt>
					<dd>Web design concept</dd>
				  </div>

				</dl>

This is my CSS:

.work figure {
	float:left;
	margin: 20px;
	width: 200px;
	height: 200px;
	background: #9d2e2c;
	line-height: 33px;
	-webkit-filter: sepia(0.4);
	position: relative;
	padding: 0;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
}

.work figure a img {
	height: 200px;
	width: 200px;
}

.work figure dl {
	opacity: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 20px;
	margin: 0;
	line-height: 2.5;
	background: rgba(0,0,0,0,;
	color: white;
	transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
}

.work figure:hover dl {
	opacity: 1;
}

.work figure dl dt {
	text-transform: uppercase;
	font-family: PT Sans Narrow;
	font-size: 12px;
	margin-bottom: -16px;
}

.work figure dl dd {
	margin-left: 0;
}

dl div {
	padding: 10px;
    width: 180px;
    opacity: 0;
    right: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
}

.one {
	-webkit-transform: translateX(-30px);
	-moz-transform: translateX(-30px);
	-ms-transform: translateX(-30px);
	transform: translateX(-30px);
}

.two {
	top:100px;
	-webkit-transform: translateX(30px);
	-moz-transform: translateX(30px);
	-ms-transform: translateX(30px);
	transform: translateX(30px);
}

.work figure:hover {
	-webkit-filter:grayscale(0.;
}

figure:hover .one {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}

figure:hover .two {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}

.current {
    -webkit-filter: sepia(0) !important;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
.current-li {
	color: #f8001d;
}

.not-current {
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    -o-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
    -webkit-filter: grayscale(1) !important;
}

.not-current:hover dl {
	opacity: 0;
}

This is my Jquery:

function scaledown()
{
	$('.work>figure').removeClass('current').addClass('not-current');
	$('nav>ul>li').removeClass('current-li');
}

function show(category)
{
	scaledown();
	$('#' + category).addClass('current-li');
	$('.' + category).removeClass('not-current');
	$('.' + category).addClass('current');

	if (category=="all")
	{
		$('nav>ul>li').removeClass('current-li');
		$('#all').addClass('current-li');
		$('.work> figure').removeClass('not-current');
	}
}

$(document).ready(function()
{
	$('#all').addClass('current-li');
	$("nav>ul>li").click(function()
	{
		show(this.id);
	});

February 23, 201412 yr

Author

Sorry for that long post above. Please check my jQuery only please. Thanks

function scaledown()
{
	$('.work>figure').removeClass('current').addClass('not-current');
	$('nav>ul>li').removeClass('current-li');
}

function show(category)
{
	scaledown();
	$('#' + category).addClass('current-li');
	$('.' + category).removeClass('not-current');
	$('.' + category).addClass('current');

	if (category=="all")
	{
		$('nav>ul>li').removeClass('current-li');
		$('#all').addClass('current-li');
		$('.work> figure').removeClass('not-current');
	}
}

$(document).ready(function()
{
	$('#all').addClass('current-li');
	$("nav>ul>li").click(function()
	{
		show(this.id);
	});

	$("#fb").click(function()
	{
		window.open("https://www.facebook.com/tran.nguyen.7545");

	});

	$("#linkedIn").click(function()
		{
			window.open("http://www.linkedin.com/profile/view?id=97470019&trk=nav_responsive_tab_profile_pic");
		})
	
})

February 24, 201412 yr

Please consider using jsfiddle.net to create a working demo for us. It's much easier to work with.

February 25, 201412 yr

Author

Hi Jack, I try to use Jsfiddle.net ( including Code Pen ) before but it's not display the website. I'll try to up on JSfiddle again for you

Edited February 25, 201412 yr by nguyenhce

Need a little help here (CSS)

Featured Replies

Create an account or sign in to comment

Similar Content

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)