1
Fork 0

Fixed project image triplet

This commit is contained in:
Jake Howard 2015-11-11 08:51:50 +00:00
parent 98af512c1e
commit f14b7f7ff9
3 changed files with 16 additions and 9 deletions

View file

@ -7,13 +7,13 @@ var projectImage = React.createClass({
render: function () { render: function () {
var contents = this.props.isHovered ? var contents = this.props.isHovered ?
( (
<span> <div className="animated zoomIn">
<h4>{this.props.data.title}</h4> <h4>{this.props.data.title}</h4>
<p>{this.props.data.text}</p> <p>{this.props.data.text}</p>
<a href={this.props.data.link} className="btn btn-default"> <a href={this.props.data.link} className="btn btn-default">
Find out more Find out more
</a> </a>
</span> </div>
) : null; ) : null;
return ( return (
<Col sm={4}> <Col sm={4}>

View file

@ -7,19 +7,19 @@ const DATA = [
{ {
className: "", className: "",
title: "College", title: "College",
text: "", text: "Some College Stuff",
link: "", link: "",
}, },
{ {
className: "", className: "",
title: "Personal", title: "Personal",
text: "", text: "Some Personal Stuff",
link: "", link: "",
}, },
{ {
className: "", className: "",
title: "Work", title: "Work",
text: "", text: "Some Work Stuff",
link: "", link: "",
} }
]; ];

View file

@ -111,16 +111,23 @@ ol , ul{
} }
.wrapper { .wrapper {
background-color: black;
color: white; color: white;
margin: 0 auto; margin: 0 auto;
background-color: red;
&:hover .project { &:hover .project {
opacity: 0.6; opacity: 1;
} }
& .project { & .project {
opacity: 1; padding: 18px;
.transition(~"opacity 0.5s ease-in");
opacity: 0;
background-color: rgba(0,0,0,0.6);
h2 {
margin-top: 0;
}
} }
} }
} }