"box shadow"
Bootstrap 3.0.0 Snippet by Mohamed117

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="mawdo3"> <div class="mawdo31"><div class="imgmawdo31"></div> <p> <b>PHP</b> is a server-side scripting language designed primarily for web development but also used as a general-purpose programming language. Originally created by Rasmus Lerdorf in 1994, the <b>PHP</b> reference implementation is now produced by The <b>PHP</b> Development Team. <b>PHP</b> originally stood for LL Personal Home Page, but it now stands for the recursive acronym <b>PHP</b>: Hypertext Preprocessor. <b>PHP</b> code may be embedded into HTML or HTML5 markup, or it can be used in combination with various web template systems, web content management systems and web frameworks. </p> </div> <div class="mawdo32"> <div class="imgmawdo32"></div><p>Cascading Style Sheets (<b>CSS</b>) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, <b>CSS</b> is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications. <b>CSS</b> is designed primarily to enable the separation of presentation and content, including aspects such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate . <b>CSS</b> file, and reduce complexity and repetition in the structural content.</p> </div> <div class="mawdo33"> <div class="imgmawdo33"></div> <p><b>HTML5</b> is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the <b>HTML</b> standard. It was published in October 2014 by the World Wide Web Consortium (W3C) to improve the language with support for the latest multimedia, while keeping it both easily readable by humans and consistently understood by computers and devices such as web browsers, parsers, etc. HTML5 is intended to subsume not only <b>HTML 4</b>, but also <b>XHTML</b> 1 and DOM Level 2 <b>HTML</b>. <b>HTML5</b> includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalizes the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications. For the same reasons,<b> HTML5 </b>is also a candidate for cross-platform mobile applications, because it includes features designed with low-powered devices in mind.</p></div> </div> </div> </div>
.mawdo3 { margin-top: 400px; margin-left: 49px; } .mawdo31 { width: 20%; height: 610px; float: left; width: 23%; border:1px solid #cccccc; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .mawdo32 { width: 20%; height: 308px; width: 75%; border:1px solid #cccccc; margin-left: 286px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .mawdo33 { width: 20%; height: 290px; float: left; width: 75%; border:1px solid #cccccc; margin-left: 10px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin-top: 10px; } .espace { margin-top: 400px; width: 100%; height: 300px; } .imgmawdo31 { width: 77%; height: 170px; float: left; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBtkL27xJKNi28wAriWxPn3FVyi43D7QleQ8Xv20GdB9uoZIfm9Q'); } .imgmawdo32 { width: 20%; height: 187px; float: left; background-image: url('https://www.brandsoftheworld.com/sites/default/files/styles/logo-thumbnail/public/042015/css3.png?itok=bzukaL4s'); margin-left: 0; margin-top: 48px; } .imgmawdo33 { width: 16%; height: 160px; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmzTfz-WTH1XA-9BRl737PxTz-IPFC4lyoXQa3hBMGDP5VFNzniQ'); margin-left: 10px; margin-top: 61px; float: left; } .mawdo31:hover { -webkit-transform: translate(-0.43em,-0.43em); -o-transform: translate(-0.43em,-0.43em); -ms-transform: translate(-0.43em,-0.43em); transform: translate(-0.43em,-0.43em); -moz-transform: translate(-0.43em,-0.43em); box-shadow: 5px 5px 16px rgba(0, 0, 0, 0.43); color: black; border-top-width: 2px; border-right-width: 2px; } .mawdo33 p { float: left; width: 78%; margin-top: 17px; margin-left: 20px; font-size: 16px; color: rgba(4, 4, 3, 0.69); } .mawdo32 p { float: left; width: 78%; margin-top: 17px; margin-left: 12px; font-size: 16px; color: rgba(4, 4, 3, 0.69); } .mawdo31 p { float: left; width: 94%; margin-top: 7px; margin-left: 12px; font-size: 16px; color: rgba(4, 4, 3, 0.69); } .mawdo32:hover { -webkit-transform: translate(0.43em,-0.43em); -o-transform: translate(0.43em,-0.43em); -ms-transform: translate(0.43em,-0.43em); transform: translate(0.43em,-0.43em); -moz-transform: translate(0.43em,-0.43em); box-shadow: -5px 5px 16px rgba(0, 0, 0, 0.43); color: black; border-top-width: 2px; border-right-width: 2px; } .mawdo33:hover { -webkit-transform: translate(0.42em,0.42em); -o-transform: translate(0.42em,0.42em); -ms-transform: translate(0.42em,0.42em); transform: translate(0.42em,0.42em); -moz-transform: translate(0.42em,0.42em); box-shadow: -5px -5px 16px rgba(0, 0, 0, 0.43); color: black; border-bottom-width: 2px; border-right-width: 2px; }

Related: See More


Questions / Comments: