I coded this layout but it's not responsive. The image doesn't seem to respond as it needs to. Can someone help me with this.
I wanted the code to respond to image where it is able to re-size itself as the browser size is adjusted. However i can only see that the images sort of align as I re-size the browser but it fails to change the sizes. I am not sure what is going on in here. Seems like i have all the code placed in but still doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
.responsive {
width: 100%;
height: auto;
}
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 2px;
margin-bottom: -0.5px;
color: #ffffff;
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-4 menu">
<img src="https://via.placeholder.com/300X150" />
</div>
<div class="col-8">
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
</div>
</div>
<div class="col-3">
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
</div>
<div>
<ul>
<img src="https://via.placeholder.com/305X130" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" />
</ul>
</div>
</body>
</html>
Here you go:
https://codepen.io/panchroma/pen/EeaoyP
There were two simple syntax errors in your CSS, I added a closing curly bracket at line 20 and commented out line 28 in your HTML.
What was happening without these corrections is that there was no max-width for your images and they weren't scaling at narrow viewports.
Good luck!
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
} /* added closing bracket */
.responsive {
width: 100%;
height: auto;
}
/* } commented out this bracket */
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 2px;
margin-bottom: -0.5px;
color: #ffffff;
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-4 menu">
<img src="https://via.placeholder.com/300X150" />
</div>
<div class="col-8">
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
</div>
</div>
<div class="col-3">
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
</div>
<div>
<ul>
<img src="https://via.placeholder.com/305X130" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" />
</ul>
</div>
</body>
</html>
Related
I am trying to resize my map icon with scaledSize however the icon does not change, here is my code:
This works:
<marker icon="{resource.marker_circle}" class="marker-icon" id="{resource.id}" position="{resource.address}" title="{resource.name}" id="resource_clicked" value="{resource.id}"
on-mouseover="showInfoWindow(event, '{resource.id}')">
But when I try to resize the icons, it does not work with scaledSize:
<div class="map-container">
<div style="margin: 0 auto; overflow:hidden; background: white;">
<div style=" width: 100%; margin:center; height: 257px; border: none; border-radius: 25px;" map-lazy-load="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
<ng-map ng-map-custom style="width: 100%;height: 100%;border: none; border-radius: 25px;" center="Santa Ana, CA" zoom="11">
{!resources.filter('category_ref', _equals(my.category)).each(per_page: 30, page:response._page_44_resources_repeatingsection1) do |resource|}
<marker icon="{url: resource.marker_circle, scaledSize:[32,40], origin: [0,0], anchor: [16,40]}" class="marker-icon" id="{resource.id}" position="{resource.address}" id="resource_clicked" value="{resource.id}"
on-mouseover="showInfoWindow(event, '{resource.id}')"></marker>
<info-window id="{resource.id}" max-width="300" style="display: none;">
<div ng-non-bindable="">
<div id="siteNotice"></div>
<a href="" response-click="go">
<h3 id="firstHeading" class="firstHeading">Location - # of Searches</h3>
</a>
<div id="bodyContent">
<p>
{resource.city}
</p>
</div>
</div>
</info-window>
{!end}
</ng-map>
</div>
</div>
</div>
i'm using a library called React Contexty, and it has a menu that is inside of the Contextify and is called of ContextMenu, when i do request for it to click in the Item of the ContextMenu, it click but the action not happens.
Cypress:
cy.get("img[data-test=img--menu-candidate]")
.click({
force: true
})
cy.get(".testinhoImg").click({
force: true
})
My MenuContext:
<ContextMenu id={`menu-${this.props.candidate.id}`} animation={animation.fade} theme={theme.light}>
<Item>
<div style={{ width: '50px', marginLeft: '0.5em', marginRight: '0.5em' }}>
<img src={ViewSrc} alt="View" />
</div>
<span className="ibm-plex-sans-serif-regular ibm-textcolor-blue-60"> View </span>
</Item>
Somebody know why? And help-me please?
HTML:
<div class="react-contexify react-contexify__theme--light react-contexify__will-enter--fade" style="left: 447px; top: 308px; opacity: 1;">
<div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; margin-left: 0.5em; margin-right: 0.5em;"><img src="/static/media/view.2844f64a.svg" alt="View"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60"> View </span></div>
</div>
<div class="react-contexify__separator"></div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 65px;"><img src="/static/media/move.f7f8dc44.svg" alt="Move to folder" style="margin-left: 0.5em; margin-right: 0.5em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Move to folder</span></div>
</div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; padding-right: 1em;"><img src="/static/media/email.330dcb30.svg" alt="Send Email" style="padding-right: 1em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Send Email</span></div>
</div>
<div class="react-contexify__item react-contexify__item--disabled" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 65px;"><img src="/static/media/remove-folder.d620c9fb.svg" alt="Move to folder" style="margin-left: 0.5em; margin-right: 0.5em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Remove from folder</span></div>
</div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; margin-left: 0.5em; margin-right: 0.5em;"><img src="/static/media/delete.e899d653.svg" alt="Delete" style="padding-right: 1.2em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Delete</span></div>
</div>
</div>
</div>
I am trying to work with the ngAnimate directive of angular but it is not working and also not showing any problem..
I had tried almost every thing but it didn't worked out..
the link to the my code is :
// Code goes here
var ngTodo = angular.module('ngTodo', ['ngAnimate','ngStorage']);
ngTodo.controller('mainController',function($scope,$localStorage){
$scope.todoArray = [];
if($localStorage.todoArray == undefined){
$localStorage.todoArray = $scope.todoArray;
}
else{
$scope.todoArray = $localStorage.todoArray;
}
$scope.addTodo = function(newTodo){
$scope.todoArray.splice(0,0, { title : newTodo.name, details : newTodo.details});
$localStorage.todoArray = $scope.todoArray;
}
$scope.removeTodo = function(index){
$scope.todoArray.splice(index,1);
$localStorage.todoArray = $scope.todoArray;
}
});
/* Styles go here */
body, html {
height: 100%;
}
body{
font-family: sans-serif;
line-height: 1.428;
font-size: 14px;
background-image: url(../../images/bg-image.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* navbar top styles starts here */
input.search-todo-list{
margin-top: 20px;
}
.navbar-fixed-top{
background-color: #80bfff;
}
/* navbar top styles ends here */
/* content section starts here */
.content{
margin-top: 64px;
margin-bottom: 50px;
}
.empty-todo-list-message{
height: 200px;
margin-top: 30px;
text-align: center;
}
.todo-item{
margin-top: 10px;
}
.panel-heading,
.panel-footer{
padding: 5px 5px;
}
.panel-body{
padding: 7px;
}
.panel-default>.panel-heading,
.panel-body,
.panel-footer{
background-color: yellow;
}
/* content section starts here */
/* navbar bottom styles starts here */
.navbar-fixed-bottom input{
width: 100%;
margin-right: 20px;
}
.navbar-fixed-bottom input,
button{
margin-top: 10px;
}
.navbar-fixed-bottom{
background-color: #80bfff;
}
/* navbar bottom styles ends here */
/* animation styles */
.move-animation.ng-move {
transition: 1.75s;
opacity: 0;
}
.move-animation.ng-move.ng-move-active {
opacity: 1;
}
<!DOCTYPE html>
<html lang="en" ng-app="ngTodo">
<head>
<meta charset="UTF-8">
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" ng-controller="mainController">
<!-- navbar top starts here -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img width="40px" alt="Todo App Icon" class="img-circle img-responsive" src="assets/icon/icon.jpg">
</a>
</div>
</div>
<div class="col-sm-8">
<h2 class="text-center">Today's Todo List</h2>
</div>
<div class="col-sm-2">
<input type="text" placeholder="search..." ng-model="query" class="search-todo-list">
</div>
</div>
</div>
</nav>
<!-- navbar top ends here -->
<!-- content section starts here -->
<div class="row">
<div class="col-sm-12 content">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 empty-todo-list-message" ng-if="todoArray.length == 0">
<div class="panel panel-default ">
<div class="panel-body">
<h1><strong>Your Todo List is EMPTY</strong></h1>
</div>
</div>
</div>
<!-- item starts here -->
<div class="col-sm-6 col-sm-offset-3 todo-item" ng-repeat="todo in todoArray | filter : query" ng-animate=" 'animate' ">
<div class="panel panel-default ">
<div class="panel-heading text-center">
<h3><strong>{{ todo.title + " : " }}</strong></h3>
</div>
<div class="panel-body">
<strong>{{ todo.details}}</strong>
</div>
<div class="panel-footer text-center">
<button ng-click="removeTodo($index)"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i>
delete</button>
</div>
</div>
</div>
<!-- item ends here -->
</div>
</div>
</div>
<!-- content section ends here -->
<!-- navbar bottom starts here -->
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<input type="text" placeholder="Add Todo Item" required ng-model="newTodo.name" >
</div>
<div class=" col-sm-4">
<input type="text" placeholder="Add Todo Item Details" required ng-model="newTodo.details">
</div>
<div class=" col-sm-2">
<button ng-click="addTodo(newTodo)" ><i class="fa fa-plus" aria-hidden="true"></i> Add ToDo</button>
</div>
</div>
</div>
</nav>
<!-- navbar bottom ends here -->
</div>
</body>
</html>
I'm using slider in my web, it works when i used it in a simple page without Angular, but when i using Angular routing it does not work!! it makes me confuse, what is the problem?
this is the slider:
<div id="leo-slideshow" class="clearfix">
<div class="banner" style="padding-right: 20px !important;height:375px;padding: 0px; margin: 0px; overflow: visible;">
<div class="columns-container">
<div id="columns" class="container">
<div id="slider_row" class="row">
<div id="top_column" class="center_column col-xs-12 col-sm-12 col-md-12">
<!-- Module HomeSlider -->
<div id="homepage-slider" class="col-xs-8 col-sm-8 col-md-8">
<div class="bx-wrapper" style="max-width: 779px; margin: 0px auto;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 448px;">
<ul id="homeslider" style="max-height: 448px; width: 515%; position: relative; left: -2336.98px;">
<li class="homeslider-container" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-2">
<img src="~/Content/Images/Slider/sample-2.jpg" width="779" height="448" alt="sample-2">
</a>
</li>
<li class="homeslider-container" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-3">
<img src="~/Content/Images/Slider/sample-3.jpg" width="779" height="448" alt="sample-3">
</a>
</li>
<li class="homeslider-container bx-clone" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-1">
<img src="~/Content/Images/Slider/sample-1.jpg" width="779" height="448" alt="sample-1">
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- /Module HomeSlider -->
<div id="htmlcontent_top " class="animation_group_165 animated fadeInUp ">
<ul class="htmlcontent-home clearfix row">
<li class="htmlcontent-item-1 col-xs-4 col-sm-4 col-md-4 pull-left ">
<a href="http://www.prestashop.com/" class="item-link" title="">
<img src="~/Content/Images/SitePic/banner-img6.jpg" class="item-img " title="" alt="" width="381" height="219">
</a>
</li>
<li class="htmlcontent-item-2 col-xs-4 col-sm-4 col-md-4 ">
<a href="http://www.prestashop.com/" class="item-link" title="">
<img src="~/Content/Images/SitePic/banner-img7.jpg" class="item-img " title="" alt="" width="381" height="219">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
and the script:
$(document).ready(function(){
if (typeof(homeslider_speed) == 'undefined')
homeslider_speed = 500;
if (typeof(homeslider_pause) == 'undefined')
homeslider_pause = 3000;
if (typeof(homeslider_loop) == 'undefined')
homeslider_loop = true;
if (typeof(homeslider_width) == 'undefined')
homeslider_width = 779;
$('.homeslider-description').click(function () {
window.location.href = $(this).prev('a').prop('href');
});
if ($('#htmlcontent_top').length > 0)
$('#homepage-slider').addClass('col-xs-8');
else
$('#homepage-slider').addClass('col-xs-12');
if (!!$.prototype.bxSlider)
$('#homeslider').bxSlider({
useCSS: false,
maxSlides: 1,
slideWidth: homeslider_width,
infiniteLoop: homeslider_loop,
hideControlOnEnd: true,
pager: false,
autoHover: true,
auto: homeslider_loop,
speed: parseInt(homeslider_speed),
pause: homeslider_pause,
controls: true
});
});
Note: i am using bxslider.
I've made this responsive image grid.
http://jsfiddle.net/ZhA6a/
<section class="project_main_container">
<ul>
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/2_800.jpg"></img>
</div>
</div>
</li>
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/3_800.jpg"></img>
</div>
</div>
</li>
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/2_800.jpg"></img>
</div>
</div>
</li>
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/3_800.jpg"></img>
</div>
</div>
</li>
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/2_800.jpg"></img>
</div>
</div>
</li>
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/3_800.jpg"></img>
</div>
</div>
</li>
</ul>
</section>
ol, ul {
list-style: none;
line-height: 0;
}
.project_main_container {
width: 100%;
}
.project_container {
float: left;
width: 33.3333333333333333333333333333333333333333333333333%;
background-size:cover;
overflow:hidden;
}
.project_image {
width: 100%;
}
#media only screen and (max-width : 1000px) {
/*row of two boxes*/
.project_container{
width: 50%;
}
}
Each picture represents a design case I've done. I want each image to darken and a text title to show in the middle of the image on hover.
I know that the effect I'm describing is existing but I can't get it working with the responsive grid.
I hope someone will help me - Thanks!
You can do this using :hover with some CSS3 filters. The idea is to add your title as an absolutely positioned element within your grid blocks, and hide it by default. On hover the title will have a display:block applied to it so it appears. And the image will have a filter:brightness applied to darken it a bit.
HTML
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/3_800.jpg"></img>
<h1>Project Title</h1>
</div>
</div>
</li>
CSS
.project_media h1 {
text-align:center;
position:absolute;
top:50%;
width:100%;
transform:translate(0%,-50%);
-webkit-transform:translate(0%,-50%);
color:#FFFFFF;
font-family:Arial;
text-transform:uppercase;
display:none;
}
.project_container:hover img {
filter: brightness(0.3);
-webkit-filter:brightness(0.3);
-moz-filter:brightness(0.3);
}
.project_container:hover h1 {
display:block;
}
And the working demo.
Something like this http://jsfiddle.net/ZhA6a/1/
No need for js. You can adjust the text position or colour as you like, this is just an example so you get the idea
<section class="project_main_container">
<ul>
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/2_800.jpg"></img>
<p>text</p>
<div class="dark"></div>
</div>
</div>
</li>
</ul>
</section>
CSS
p {
display: none;
position: absolute;
top: 0;
left: 0;
}
.project_media {
position: relative;
}
.project_media .dark {
display: none;
background: black;
opacity: 0.3;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.project_media:hover .dark {
display: block;
}
.project_media:hover p {
display: block;
}
.project_media:hover img {
opacity: 0.8;
}