title: Show a large-size image when click on thumbnail and giving opacity
body: <p>I think It's better that I explain like this:</p>
  <ol>
  <li>There are 6 small images on the page next to each other</li>
  <li>user clicks on one of them</li>
  <li>all of the 5 other images (except for the image that the user clicked) will have an opacity of 0.7</li>
  <li>A large version of the image (the image that the user has been selected) will show. ( I have an img tag and the image src will replace the src of the tag )</li>
  </ol>
  <p>Can you tell me how can I do that? I prefer using JavaScript and Angular JS, But if you need it, there's no problem if you use JQuery too. sorry for bad English. Thank you
  <strong>Update:</strong> some user asked me what I tried... This is my code and I know It will not work... that's why I'm asking this from you...</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;fa-IR&quot; data-ng-app=&quot;projects&quot; data-ng-controller=&quot;projects_controller&quot;&gt;
  &lt;!-- Website design by Mohsen_Nirouzad --&gt;
  &lt;head&gt;
     &lt;!-- Adding meta information --&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;meta name=&quot;author&quot; content=&quot;Mohsen Nirouzad - http://AproZ.ir&quot;&gt;
      &lt;!-- defining stylesheets DO NOT delete the bellow codes if you don't have enough knowledge of web design --&gt;
      &lt;!-- I used w3data.min.js for javascript templating engine so you've to change the bellow information in script tag --&gt;
      &lt;meta name=&quot;application-name&quot; content=&quot;{{application_name}}&quot;&gt;
      &lt;meta name=&quot;description&quot; content=&quot;{{description}}&quot;&gt;
      &lt;meta name=&quot;keywords&quot; content=&quot;{{keywords}}&quot;&gt;
      &lt;meta name=&quot;publisher&quot; content=&quot;{{googleplus_url}}&quot;&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;{{page_title}}&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/app.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/font-awesome.min.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/w3rtl.min.css&quot;&gt;
      &lt;script src=&quot;assets/js/angular.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
     &lt;body&gt;
      &lt;div data-ng-include=&quot;'variables/sidenav.html'&quot;&gt;&lt;/div&gt;
      &lt;div style=&quot;margin-right:25%&quot; class=&quot;w3-row-padding&quot;&gt;
         &lt;div class=&quot;w3-col s6&quot;&gt;
             &lt;div data-ng-include=&quot;'variables/logo1.html'&quot;&gt;&lt;/div&gt;
             &lt;div class=&quot;w3-row-padding&quot;&gt;
                 &lt;div class=&quot;w3-col&quot;&gt;
                     &lt;div class=&quot;w3-col s6&quot;&gt;
                         &lt;img src=&quot;{{img1}}&quot; alt=&quot;{{img1_alt}}&quot; title=&quot;{{img1_title}}&quot;&gt;&lt;br&gt;
                         &lt;img src=&quot;{{img2}}&quot; alt=&quot;{{img2_alt}}&quot; title=&quot;{{img2_title}}&quot;&gt;&lt;br&gt;
                         &lt;img src=&quot;{{img3}}&quot; alt=&quot;{{img3_alt}}&quot; title=&quot;{{img3_title}}&quot;&gt;
                     &lt;/div&gt;
                     &lt;div class=&quot;w3-col s6&quot;&gt;
                         &lt;img src=&quot;{{img4}}&quot; alt=&quot;{{img4_alt}}&quot; title=&quot;{{img4_title}}&quot;&gt;&lt;br&gt;
                         &lt;img src=&quot;{{img5}}&quot; alt=&quot;{{img5_alt}}&quot; title=&quot;{{img5_title}}&quot;&gt;&lt;br&gt;
                         &lt;img src=&quot;{{img6}}&quot; alt=&quot;{{img6_alt}}&quot; title=&quot;{{img6_title}}&quot;&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
             &lt;div&gt;
                &lt;a href=&quot;javascript:void(0)&quot; hreflang=&quot;fa-IR&quot;&gt;
                    &lt;i class=&quot;fa fa-square-o&quot;&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;a href=&quot;javascript:void(0)&quot; hreflang=&quot;fa-IR&quot;&gt;
                    &lt;i class=&quot;fa fa-square-o&quot;&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;a href=&quot;javascript:void(0)&quot; hreflang=&quot;fa-IR&quot;&gt;
                    &lt;i class=&quot;fa fa-square-o&quot;&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;a href=&quot;javascript:void(0)&quot; hreflang=&quot;fa-IR&quot;&gt;
                    &lt;i class=&quot;fa fa-square-o&quot;&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;a href=&quot;javascript:void(0)&quot; hreflang=&quot;fa-IR&quot;&gt;
                    &lt;i class=&quot;fa fa-square&quot;&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;a href=&quot;javascript:void(0)&quot; hreflang=&quot;fa-IR&quot;&gt;
                    &lt;i class=&quot;fa fa-square-o&quot;&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;a href=&quot;javascript:void(0)&quot; hreflang=&quot;fa-IR&quot;&gt;
                    &lt;i class=&quot;fa fa-square-o&quot;&gt;&lt;/i&gt;
                &lt;/a&gt;
             &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class=&quot;w3-col s6&quot;&gt;
             
         &lt;/div&gt;
         &lt;/div&gt;
      &lt;div data-ng-include=&quot;'variables/footer.html'&quot;&gt;&lt;/div&gt;
      &lt;script&gt;
          var application = angular.module('projects',[]);
          application.controller('projects_controller',function($scope){
          $scope.description='Some Description',
          $scope.keywords='key1,key2,key3',
          $scope.application_name='Sarabon',
          $scope.googleplus_url='#',
          $scope.page_title='پروژه ها'
      });
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>