Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                	<div class="gallery__box">
						<div class="gallery__image">
							<img src="https://s.zagranitsa.com/images/articles/3059/870x486/b3dc77a71cadcd99b7c23bc33d948c2d.jpg?1457689085" alt="">
						</div>
						<div class="gallery__image">
								<img src="https://s.zagranitsa.com/images/articles/3059/870x486/b3dc77a71cadcd99b7c23bc33d948c2d.jpg?1457689085" alt="">
						</div>
						<div class="gallery__image">
							<img src="https://i.ibb.co/cgN9JNm/gallery-2.jpg" alt="">
						</div>
						<div class="gallery__image">
								<img src="https://s.zagranitsa.com/images/articles/3059/870x486/b3dc77a71cadcd99b7c23bc33d948c2d.jpg?1457689085" alt="">
						</div>
						<div class="gallery__image">
							<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUTExMWFhUXGBUYGBgYFxcYFxoXFxcXFxcXFxgdHSggGB0lGxcXITEiJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGhAQGy0lHyUtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIALEBHAMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAEAAIDBQYBBwj/xAA/EAABAwIEAwUGBAQGAQUAAAABAAIRAyEEEjFBBVFhBhNxgZEiMqGxwfAUQlLRB2Jy4RUjgpKy8UMWMzQ10v/EABsBAAMBAQEBAQAAAAAAAAAAAAECAwQABQYH/8QALBEAAgIBAwMDAwQDAQAAAAAAAAECEQMEEiETMUEFIlEygZEUYaHhQnGxNP/aAAwDAQACEQMRAD8ACxHZZzznp+9U96IiP1Qd7AeS2nBOyD2MAmOZdb4clb4KvSpQ2mL8zc/2VjhsYTM3gpp62+ERQNT7M0h7zp8EZR4Fhmj3J8U78RK4cRG6zyzz+RqRMzhGGbpSaPX91G6hhpgsAPif3UNbH2WffiCarsx/tZYNTrcmOnEDaXgvcRwjC1N48HD6hVeK7GMcD3dXXZw+o/ZTU6wVhRxUCyli9Wyp8ncM817Rdj8YyS1peOYuB6aeawfEOAYgn/McAQbQL9ZK+jKXFBMGxXMbwrD4ge2wT+oWPnz817Gl9XhLhg2/DPnzA9k8Q056LyQdRYO+Nipce3E4UNc9mUOJBaLgRvI0mV6zxTs87DNL6YLmjcDQfzDbxWC7SdomZHU3NzG4O22oK9XHl6nbk60ZbtBx5z6eQBoBAgtPtCIJBt1O+yruz3ZuvjamSgyYElziQxusEug8vFBVKAMwTA0nX70uvaf4Q8Fr4ehUNRoa2qWubc54Ai7YgDfzVskljhaAuWZ7H/wtZTwWaahxYplxa0hzHVNcgblmNrJcH/hTXLmPxVVjJHtMZ7TrQAM3uzre8RvNvXH4ebrua11i/UToptRjqnZnB4emaYph0+8X+04+Z93yheTdtOBNoVM9EO7p2s3DXfpncG5Ei2i9r7RMJghYjtBwapiaJpMADi5hBNhY3kxyn4KuGbTtsDPJQnNC0nHuxdbDU2VC9lScwcGT7ECbzqDf0Sw/YrFl1HPSc1lUi+uQak1B+UxJg+Gq2bo1dk+SiDCBMGOZBjlrEJ9Nq9cqYOnSpCnAc0CAMoA9L81kKXAGtJhsiSReYHK6SOVMNGdpMRtGmtNw7DtmCxpAGhASx3AhTy5ZLTvyO4680HNXRxQ06ambhiVbf4aGmMwIgEbHe0HlHh8lfcMZQpNc94BLRMOEydgxsgHxM+CnOajyFGN/AFDYnAOGy9FwPbEzljK0yAC2nl6S0NEcvTqrJ+GwuMBYTTZVPuOpj2SbyHAGHXabiCorU88obaeK1qSDqsWw7R8GdQe5rxDhry5gg7gi8rJ4gCVtg7XBNghGyjOn31UzmfenVMc1UoFkfdn4Tt97H0XWj0vGkTpoUk4N+7eK6jrOEzA5fG6a4D5JwShdR1nufCsSXjMecLSsqwLO2uvPuFcRLG3gbwbeqnqdoDMhfLLFTCmbRuPiYKGrcWg6rKf4qZkKKvxG0uTShYWzVN4oCboHHY6aggbffis5h+LMAzTIRDOJBxJGkHXryXnanDZOTNFg8fm1VtRx0WlYnh+KB3g+KumYsZdNxJjSV56xgVpGkbXBvZEUMcNislVxzR7plSUMWdVOUHF+0ZZGj0DA4/NAVB2r/h9QxftMim8zMCWny2KP4BTkBxdflb4rQscve9PnlhG2y9KS5PJeCfw1bSeDWa14BBIOxF7dNoK3wqZeiusRRDh1Wf4hXLBdvPePAL1eo8j5OraR1cWYKirY1zWA5fEqrPGi0nNBJ8ICDr8VNWxNh5KixsG4JxfEGv0BB5bKsNQiQN1CX+1ZF06Ux1VdtC2OwOIa339j46iD8JR9TiDDoLcymDCAcvRD4tsWslpNhsGxuV2ipMRSymysqlMoLEsVYoVsDAAMwjHYgBhzAkDTxNgoMNhi4qxoYCRDogppUcmZ7iWLGaQIhot1OpUmEd3waHGIkdbXBIGt91YcS4EGus4OBFr3HQ/uqWth+7MA3IM6iNIg6E9EaUlwC6OVnBtQ5IqCNBYGCRfc+HqiOF484Wo1zfeyH2SMusgA89Aeij4fSL8zrWIPXT+xVzhsLLmPLMxpvFouQbQTGgF4U8mBbbCp8hfb2mK9CnXF/daDaSHNzQ6N2kHycF5PXo3K9W7QhtPDuaJ9upmG3stDhptcrzXEtuVbSXsoWb5KlzVGWo19NQuprakTsGLUgie78/8AtMcz7+/JGjrIiEnNUob9fkmliFHbjS1uJOdqbckRh5OtlQsvqiO+I3K8N4Rky9rY5jAG5rlCY7FDIROoVJVeoXOPMqcsYXIscEXZcodAui21i03lU9F5GiucADUHLyUJ4U0DuG0MUQZHVansuypXdlHuWLzImLoLhWCYQGBud2oiddddtFquzlUUmZQIuZnqZ3Wb9KrDGPyaM8PoloaabYEQIGvU7ooYOiQQWNvrAAJ6yq2jihz8SSE7/EBPwlO8cfgrwW+Hayk3K0QB96qalipWdfjSdCrHCYjpCi3TpBUi7bWVfx3C95TJGoFxzH7p7KqkbWgq2PI0xnyjzHiLxJERCGZUiL6rQdtsDkOdo9l3wO4WTw+IFgvdxVONozN06Ze4VohFsrgbKlZi40SdilzhYd5dYnGWsq84qbqBlYGxSNRoXKFHbhz60qGZKHr4vkUL+JJKooC7yzo1yDojKVVAF1pT6VVK4h3FhjTLREW6CeolMZgmuBmNBa0n7KDOPgwBIBufnCsqNHO3M03A062t8dUrVB3WS4LA0g0tbY6mRElQuxdOkLm4/LYz4lBVq7rzdVmIozzTbd3DEunaBu0PEnVnFxOvLQdAsvUpK5xVBwtqEBiGwtWOKSpCSkVdSmou6Vg+mo+6VkJuA3UeiiLOiOqUyoixE7cBuYuupEInLuf+/vRR5EaBuJWiEqhUxYmGkvMcCm4EFNEDh9SA7u35TcHK7KRpIMRqpO62C9u4RhKGIwdI0m5GBg9gwCwgkXE7uDjO8dVDJ7SkFuPH+A9nX4h0yG0mkd486AEiWt5viSB6wrnD8DZ3raVJ5ILg3M7qbmAB6fFa3GNYwhrW+y0+7MAx9FVsoSbKLVjVRqanBu6oCnRaRMuJJvOpk76RfoswTUa4yTE66glaXCcXcaZY+5AAB6Xmfgq7F0g5kAGSZPLS0fH0CltHdFb+NdNyFZ0cdLbGNjdQ8Bw7A6oHNJLmgNcG5i035AkTpKr69Ash0Q0zFxfrGsdUFES6LFuIMm5ROH4q4HUqppVAQmVagGihl098oVujXYbjB5o+njpWDZiiArXC8QndY4pp8hjlNRxWmK9BzN4lv9Q0/bzXkmIcWOK9IwmNusN21w+SsXDR3tDz1+Mr3/T537WSzv8AyKr8aQmHHumxQOaVY4ThneU8zZzcrQf2XrOKXcgptktDiRbvKKNcuUTeztUtkEeH9/7I9mAfSY32J5wb/wB1N7PA6b8grqRUeQhanDcIloc72eh1TsXwsHQaaQpdRXQ+1mfbWMQnZpsVYjgzjohauCLSinF9gcg/clFUKpHSLJ1LDEXU9Qh+uvPmEGwpgLqxEwZ8bqCtWfCNc1oUbwNEVQGynq1HHVV9ZqvalEFC1MP0VosRspIupA1EVMKZSGHIVOBLAnU1A5isXOG6jZTDtEUCyv7tI00f+HXRSG5RsFjO6XDRVj3Ce/BuaAS0gESCQQCOY5rI0MpFz/D7s1TxNV5qiWUwCBsXE7xsOW8+K9PxGDgEtEHcC0zvAWX/AIc4KphxXqvaWBzWBoc2C6JdmveAPIyeSs8Xxtz3Ttt4LzsqcpuuxtxtKHJW4nhszvceN1acM4BSa1rniS4AkOkZekeMaqurYtwdmBuDPmNLLV4SpmoteRDouLetueqSdpDxpsxuMwtTvyZ9kE+yCcvSBpyVZicdUYC2d9pBjkSNlpuIVWTlDmgybSAJgnU2nos9jKLCPeZP9Q9OpRjG+4knXYlwvGGukNYKYdALRJByzeSLwSdUHx2t3hsLAACf0iwmNTCratOpT9oTF9jl6pGqcmZxbcmBInzGoR6fwI5+CDOdCY8FPRpFw1vtyQRdJVjhfkllBk7sNocNkXJ8tFMeElo9l0nWI16C67h63I2V1gawIvqFmniQySKzh9J0mTDgYIMym9qOFuqMYbHafG4+qtcXScXS2M3zHIlS4ehmYREgEG/OVfTvZKzpRtUYfDdkKkZnFoOsG/kUdwIgE0yyCCQtflJsAhqfCJqOcBBdqecCF6LzuSe4RY6raDHLYIqhhhqVKOzxacwdJ5R9UzFYgUyGv9mdOqlafESnK+okytT2sad0FiccxrZmyr2Y8OuNOtlyxtgeRI0lKizoq7iFBs7KrfxKBIM+CqcbxUvtc+CeGCViyzRousRSY2xIvtugaOEOaCPZ+7Kipd+CXZSToZEkq0bjnOIJBBj3efVXeJx8kVlTCa2NFOQGzOunVUGIqszZmSJuRt4K/o4qgWucTrY2vf5LM4/LnIYPZBMbz5p8UeewuSZyvigYiRpPgoX4t2xsjeEcEq4lxbTAkNzEuMCJjVcrcLqMe6i9hNRv5W+1aJn2ZtBBVfYnRO5VYLVxUt5Ot5qQVBlvYrTcH7HVXjM9oY1wuXiXR0br6woO0fZh1IOew52jUR7QA36jVT6uNy2plNs0t1GWxAa4TIkbc1BTcRpup+7S7taKIbxmc6b9VC5soruku7Ro7cbyhwKkazWimDLh7JLo13vcRc9AtXxik0NLXNDjFiQLGIECFM7DzUBAAcDYgTHVN4jUDhlcL/H03Xhym5NHpxiopmTxGPqDZu+okmdZOp+9lWvq13uGWTBBytFrW0HzWoq8HAu8ho5au/siW16VNmWm2J1O/iTuq7kuyslTfd0UeAwGJrMBOWkwEuzFvtEX0Gp8yArM4ltMNYGv7sCC6TmcN5iBfpzRFbitgMosEBUrsc4l7SZnQ3SU5d0PuUezM12geHvOUQ28a/LZUVSk5ajG0gTZAPw60xVIzSlbKWs1ztSTChdTcrz8Oon0EaF3FMJCt+G4lsw6/nCY7CzspG8PMi3mFOUEwqTRb52ZRlbBm5k+nJTUqoEaz4oNlhGvopKblneMrvLzBY6Pyi/j+6u8K5sC2oWWwxWi4cTGkwp7KKwmWVOkOSYWkLgqplXEQikym5EorAarJ9s6ss/1D6q7xGICouNjNTctOCFTTM+edxaMe9xiJKY5xIiTHJEFi53a9Wjy97IKc81f4dtOAGkSqfInMBGhhLOG4aOSjUYDDwdla5aJ1a2fAco+SxdLEPbeTKJwmHr1ZDZIALiZgQNbrLPB5bNMNQuyQPxSiKbj3RGU6wfGyE4ZhGurU2v90vaHa6SJ0urOlwqo4iWkTBBNpBMCJ1Wt7N8MZRLnEhz82UmIyiA6L6kg/Jdm1MMMOXyNh02TNLhcGjo4drGhrGgNAAAAiAE3D4drS45QHOiXbmBAHwRIqhR96CbryE2z1GqI8SPZMLM4tuaQ64NiDp4FaSpVB0I8FT12CVfFwRy8nm2JwDu8qBrCQHO0EwBPyCDyr1dlW8CwTcFwShTzOyiXCDMERuANgt61lLlGB6Vt8MwvZ/ggqy97SWXA2E85lTY3s40O9h8DkbranBsY0NpgBo0AVXWw0lKtRKUrQzwqMaZY/wCJP5wo/wAQ4HMDfmqSlxmgf/K3zkfMIxmMY73XtPgQs6lifZoZyn5snrVydSoCpHRso5VkkTcmdIsh6gRAKjemSQrkBVWKHu0XUCZlVKJuYMaagfTRNSs0auaPMId2Jp/rb6qfUxp05L8oNv4GtYpGJoqNO49VIEyUZdnYN9CcoyVML2TsVQY15DXhwG/PyKRpJ0x1JtWiXA1AHAlaDD4xobAWZEDREUqpSvDbGWbajQvxsqGpiQQqttRPFVN0Ug9dsnc9BY/2mkbIWviSH9EPVryVeGJ9zPPOuwPi2CwCjo4cuMfFTkTdSsvE3/ZX7Iz3bIf8OdqBI5qEUVreG8FFZpeXOa3YCJ/siKPZMb1DM7NB9n91neqhF02aVppyScUZHCYJz3BrRJP3db7hOEFCjFQgbXj0CH4f2fNKqXB/s+Htb25ck/tVje7owHOE7gjWND4zssGv1Xsbj2R6XpujbyJS7t0Yvj2Omqe7qOyn8rnS0OEEZRAgeyDf52VPw3tJUY9wYcxe4azJcCAIFxOhM65deYOJY6D7UC7t7nQidRIKpaGODc3tG7SLDwOXwkNv0XyeNOcnN8v9j9AcVjj0+KrybvBdrarWDKTUc6ZmfesA0RqABPn66/s3ii5veVbuIAGoDeYynQ6XkryLhnFqjLZzJGW5s0SLDcanlutRwPtg1jWsc1zpJAOYSBa7ibTM6bRJW3Sy25Km+EeV6hDfivFFWb+u6b6JrbqOm/OAQbESiKbAF9BxR8i7sa2jzsFIcPF5kKu4oGPNnNsIBzAdUFhMW2m/2nTY+6M2vUKHVblXgf2pFrWJQriiX1Qh3PC1xRnlI8dNUDY+RDhfqEZgQ9/uh5nSAVrzUZqTTtGrNPEbIqhWbllgAHQQvjZ+occQ/n+j1HBeTLUuH4jZr/gPjKIOGxIv/mgdL/IrQfjTtB9Un13mCGfGPqofrMnwhNmNlFTxeIb+Z/mHfXVFN4rW6HyPxVjVrvLYyQfGVVVWuOrfgr4tbk+a+5LJii+xypxmt+gesfVQP4g4+813+6fp9U80f5fmuto8wfinnqpy7u/uyaxJeASrXB0j/U39ioX5j7rmebf3Vt+Cadyh34Vg5esKSzIO1AHd1tntPgB9CllxX6/QFGd0wfpnxC6K8aOjwKbrtdgMCqOxA1J+ahLax1+SuqeM5vPmUQ3GjofQoPUS8oXc14M8zDVNnFvhKnrYeq7/AMgBG+X5wro40fob/tCZ+Pb+gf7f7rv1M/gHUfwU7aOIHu1fR72/DT4J7cZjmaFrujjSd8ZaVaOx7d2fAoR9ZuzXBWx6/PHs2gWn3ihlLieIn/MoNM7sqsn/AGl31Voys03kA8iRI8bqpc8fpKYf6SvRxeuamP1JMzz00JduDRUGtJu5oHUhH4LC0y8TUaRvBHkFjoPIroYdwrP13I+8V+QR0sUey06rYAbEdNFI6pA1Xj1LFub7sjwMIxnHa4/OfNxPzKzr1OPmP8mzqM9Pq4hUHaJpq0nBt3C4vHmCsoO0+I3LT4j9iE+n2mq/pp+jv/0qy1umyY3F2rXwPizzx5I5F4dlNxTh1ctB7lwYZcDpPs2NjNgAYVDX7P1qbXvcwhrGkmbWsD/y+a9BHa18e0ymfM/IlVvHOPPxFF9Fwa1rxDsrwCRyuCvPg9PjVRk39v7PXl6xPK/ckvyVtXssWVC5jHBoBgXLpEGWTrIIt4jZXWC4ZSY0B7QMveAhxgFjswAMamC06blVOJ7Q4uMrXUhb3s0H78AFVUquIeZqVmeQLj53W7q6Ze7kxz12aS8G+o8YDWBrDmI3PL6lc/xepe5vrbZY5tRo1qE+Aj6SufjGDQvnxI+qZ+o4/EWec4ybbNBVx5J1AUT6wFyR5kBYzG1KhdYkjxKipUn7wPiVz1yq1H+Q9Jvuz0il2kogDM9toHsuzHTkAVD/AOrKHI+Q/crBmkT+Y/RdgDcepSv1LL4oZaePksXcPfmilVebh0RmvqAbHl0RVHhWMdJqV8gMzYF1+e1oETOqJr4p1GhFJp7ySSbQQdJMzI2VLS7RVAYrSL3Osa8hOqjq8eZyezGkvyzZHldzWYLBtoghri6bkuMn+19gp31TCwtbtGC6xJHNE0u0Ij3vK68uehzP3NHXKuEa4uibz5nyUXfu3Pkss/j/ACkk7C5PhGqs8JiKzr928Dm4QPjqpy004K5CNS8osnVXfZTXT9ymCu4awPvSV3vidTCjQjZC/Dfd1F+AnYooVCN/qujEpt7XYRtgo4b9ld/AH7lEHFrrcYV3UmC2AnBHZRnCu/6Vn+Nn/pN/G/cBFZZCNsrzgXdfVc/Bu5EqybxE8j8EnY/+U/fmj1ZfArbK52FdGhS/Du+yrAYz+X79V3vgdkeo/gG5lacIUw4cjkrckHb5LhY0/l+S5ZTt5TOolN7t3Mequ8jOXyXYp8vgP3R637HbykyFIUCr4Mp8vl+6bUfTH5T8EOt+x28ojhz1TX0Oh9VdmrT/AEH0ChNel+j1hFZX8B3lR3E7H1UjcKrE4tuzFE7FjkE3Uk/B25lfVowdFG1pRVfEzsoHYhUjJ0OmzpokqF9EqZuJKd+L5ymUmg2wQs6JkOGtkTUrBQurp1JjKTI3Uuq4KPX4hdc8HZRknayZNjJm2OHbLhTyiDBa64JvEHYeaDdgmk5Kga087wtVT4a1z8j5Bj2KsgZtsr/5hzIEj1IfGezVRkONRjgAbB8u6e9HwX0ayxj9T/IXFmMx3Zqk73YHUf2/ZU2K7NloMPNuYn5aLYmlWHusBtqXczG33quDh1Spao9rR/KCfiYnyUMmq0a/yX5Gj1Cs4Rwunh6VOq8CXtDxP0Njt4cgiX8bLjDbzYCdbDbxUmJwVBrGsyOqQ4w17iQOdhAiQTopcFSpsEsptpzqAAOt+a+c1M8bbm7l8FWDGnWcRADQb+0Y8LQpPwb9yEaKgdpePRCve7kVk3yfFJEmhOw5G6hLo1JTalcixkoRz52cnjBvuIwoV0jUOwQtR5IECPNMAPOPvwT7ELYUXnX7+SjfVKY1vVKBzXUgEjHO6rsncn1UMdUiY6rqBRMX9Vzv+qhLjyUOQlFRXkVxDBijzSFclCinzXXArtqOoJNQc5XDXOyHaEneS6jqJhVPP4qRtY7mUOx3gnOrAf8ASDQKJaj3EcgoHOIUT641I+KhdW5JoxYUgg1OqjfWQxeud4qKIyRMaq53iHNVcNVOohoKa5SB4CCFaEx9ddtDtCn1gdkzvfJCmquCrzTbA7QouTSFAaiZ3hRUQ0e3cJ4zSyjO8kXm02mZAHI+ixParjJo1Xmme8YXgyBJbcTmEgi0xIgxadgeHYlr6eZskA5SCOgi4N5+wrvglekXBtZgymwkgi9rTt08V6s8OPURvujTOMsUnjmuUVFXtnRylwuR7ouCbWBta+6rafabM0ZiwF0k+2ZA2GwJta+94W843/DnDVmZ6LQ06+xAB+V/H4LDcY/hlXpy5hD2/qtb+obLFH07BHwGx2F46HACZOwzU5HQtzSdNVBxjjLGtjNDy24m4npEczZZ/iHZnEUrOpu6WIPlzVTVpuBuDI5202VFoMaaZ1pmjwfGgKgALspH5rkOjW23kFpKeLzgEOsbjb70Xmwq/fxWp4Viaj6Je6wzBrYBaBYXkW1nz8VHVaOLqUTtl9jRTTFyST1/dMq1GctfgqUuqiSBnbaCOp8vXqlh8e11pvuDYjyWJ6WS5uyMossalMC4IPzTXj75KJjwVO1qm013ItHHBNZHMeqkdSTCI+4QsA7up+ykKLd7qB1QymF6NP5BTDGuaNh9+Sa6u3YIPOVwkbfNHYCgn8Q77CY+rOrpQzh1HqmEnT5XTKAaCXPOxTJUEu6+dlw1OqfaGiR1fqo3Vk01GpveBMohSEXclwhy6AmmmfuUwRr0gPu67CXeBEI0vG4+f7poTnVAm5p+wigiJTSJ3+K7bn6rhjn80Qjj8lyOq55JriicODSdwllPMfBRh33dcPkuo4vOymlf+gfMq9o+8fL5JJLX6f8AVM9X1n/0fZf8PTuyf/x2eX/FqOxn/uHwH1SSVpmJGN4n7tT+ly847R6Dw+iSS1w+l/YlLujEu1K33Bf/AK139D/+b0kl5+q+lf7Rrxef9Gexfvj+k/MKupa/6R82pJJsfYizQcO/N4j5FW7dB980kl5Op+tkZjjp6oaroPP6JJLPEmC/suJJKwPAw6+n1S5pJJhQXdEYTX0SSTvsMx6if9VxJBARC7RS0P3+i4knY3gT9FzmupIIAjomVEkkQg7/AKpmx+90klRDDz+/yXN0klyCTM28Ex37JJJUBD6mvkEOVxJFBR//2Q==" alt="">
						</div>
						<div class="gallery__image">
								<img src="https://s.zagranitsa.com/images/articles/3059/870x486/b3dc77a71cadcd99b7c23bc33d948c2d.jpg?1457689085" alt="">
						</div>
</div>
              
            
!

CSS

              
                .gallery__box{
  	display: flex;
		flex-wrap: wrap;
}
	
.gallery__image{
		margin-right: 20px;
		margin-left: 20px;
		width: calc(100% / 3 - 40px);
		margin-bottom: 25px;
  	cursor: pointer;
  display: flex;
}
img{
  position: relative;
			opacity: 0.5;
  object-fit:cover;
}
			
img::after{
  		position: absolute;
				content: ' ';
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				background-color: rgba(255, 255, 255, 0.5);
				background-image: url('http://ru.3cinnolighting.com/Content/ueditor-builder/net/upload1/Other/10588/6358691262007911204848700.png');
				background-repeat: no-repeat;
				background-position: center;
				background-size: 42px 42px;
				opacity: 0;
				transition: 0.3s opacity;
}
		
img:hover{
  	opacity: 1;
}
			
		img{
 width: 100%;
      height: auto;
}
              
            
!

JS

              
                
              
            
!
999px

Console